Vanilla JavaScript中能否使用箭头函数？不支持浏览器（如IE）表现如何？

嘿，这个问题问到点子上了！作为经常在TS和原生JS之间切换的开发者，我太懂这种困惑了，下面给你一一拆解清楚：

1. Vanilla JavaScript里当然可以用箭头函数！ #

箭头函数本身就是ES6（ECMAScript 2015）原生JavaScript引入的特性，可不是TypeScript独有的。你在TS里写的箭头函数语法，放到支持ES6的现代浏览器（Chrome、Firefox、Edge等）的原生JS环境里完全能正常运行，举个简单例子：

// 原生JS里直接用箭头函数
const greet = (name) => `Hello, ${name}!`;
console.log(greet('Alice')); // 输出 "Hello, Alice!"

2. 在不支持箭头函数的浏览器（比如IE）里会怎样？ #

很遗憾，IE全系列（包括IE11）都不支持箭头函数。当这类浏览器遇到箭头函数的=>语法时，会直接抛出语法错误（比如SyntaxError: Unexpected token =>），而且这种语法错误会直接中断整个JS脚本的执行——也就是说，错误位置之后的代码都不会再运行了，完全没有优雅降级的可能，因为浏览器根本无法解析这种它不认识的语法。

3. 要兼容旧浏览器怎么办？ #

如果你的代码需要适配IE这类环境，有几个可行的方案：

• 转译代码：用Babel这类工具把ES6+的代码转成ES5兼容的版本。箭头函数会被自动转换成普通的function表达式，比如上面的greet会被转成：

  var greet = function(name) {
    return "Hello, " + name + "!";
  };
  

• 手动替换：如果只是少量代码片段，直接把箭头函数改成普通函数写法，比如把事件监听的箭头函数换成传统函数：

  // 原来的箭头函数写法（IE不支持）
  // document.querySelector('button').addEventListener('click', () => { ... });
  
  // 改成普通函数写法（兼容IE）
  document.querySelector('button').addEventListener('click', function() {
    // 你的逻辑代码
  });
  

• 避免使用：如果确定要兼容旧浏览器，干脆在这些场景下直接不用箭头函数，省得后续麻烦。

内容的提问来源于stack exchange，提问作者Tim Joyce