17370845950

箭头函数没有自己的this绑定，不绑定arguments、prototype和yield，不能用作构造函数或Generator函数，仅适用于无需动态this和参数对象的简洁回调场景。

箭头函数没有自己的 this 绑定

这是最常被踩坑的一点。箭头函数不会创建自己的 this，而是沿作用域链向上捕获外层函数的 this 值。这意味着它无法被正确用作对象方法、事件处理器或需要动态绑定 this 的场景。

常见错误现象：

const obj = {
  name: 'Alice',
  regularFunc() {
    console.log(this.name); // 'Alice'
  },
  arrowFunc: () => {
    
console.log(this.name); // undefined（在模块顶层，this 指向 global / undefined）
  }
};
obj.regularFunc(); // ✅
obj.arrowFunc();   // ❌

• 当需要方法内访问调用者实例（如 obj.method()）时，必须用普通函数
• Vue/React 类组件中生命周期方法、事件回调若依赖 this，不能写成箭头函数
• addEventListener 回调若需访问触发元素（this 指向 event.currentTarget），也不能用箭头函数

箭头函数不能用作构造函数

箭头函数没有 prototype 属性，也不支持 new 调用，否则会直接抛出 TypeError: xxx is not a constructor。

使用场景：任何需要实例化对象的地方都必须避开箭头函数，比如工具类、封装可 new 的配置器等。

• 定义类工具函数（如 new Timer()）必须用 function 或 class
• 即使只是模拟构造行为（如返回带私有状态的对象），也别用箭头函数包装 return { ... } 来“假装”构造 —— 这会让调用者误判语义

箭头函数没有 arguments 对象

箭头函数内部访问 arguments 会报 ReferenceError，因为它不绑定该伪数组。ES6 后推荐用剩余参数 ...args 替代，但如果你在维护旧代码或需要兼容 arguments.callee 等黑科技，就不能用箭头函数。

典型问题：

function outer() {
  const bad = () => console.log(arguments[0]); // ReferenceError
  const good = (...args) => console.log(args[0]);
}

• 需要访问动态参数列表且未使用 ... 语法时，避免箭头函数
• 递归匿名函数（如立即执行函数中调用自身）依赖 arguments.callee，箭头函数完全不支持
• 某些调试场景依赖 arguments 检查入参，箭头函数会丢失这个能力

箭头函数没有 yield，不能用作 Generator

想写一个可暂停、可恢复的函数？function* 是唯一选择。箭头函数语法上就不允许出现 yield 关键字，解析阶段就会报错。

性能影响：这不是性能问题，而是语言层面的禁止 —— 试图在箭头函数里写 yield 会导致 SyntaxError: Unexpected reserved word。

• 实现异步流程控制（如手动迭代、状态机）必须用 function*
• async 函数可以是箭头形式（const fn = async () => {}），但那是另一套机制，和 yield 无关

箭头函数简洁、适合闭包和短回调，但它不是万能替代品。真正容易被忽略的是：**它的语义缺失（无 this、无 arguments、无 prototype、无 yield）不是 bug，而是设计使然；用错地方时，错误往往延迟暴露（比如只在特定调用方式下才出问题），排查成本远高于写的时候多敲几个字母。**