17370845950

箭头函数不是语法糖，它与普通函数在this、arguments、prototype、new.target、Generator支持及call/apply/bind行为上存在本质差异，错误使用会导致静默失败或意外绑定。

箭头函数不是语法糖，它和普通函数在 this、arguments、prototype 和调用方式上存在本质差异——写错地方会导致静默失败或意外绑定。

箭头函数没有自己的 this

箭头函数不绑定 this，而是沿作用域链向上找外层函数的 this。这在事件回调、定时器、对象方法中极易出问题。

常见错误现象：对象方法用箭头函数定义后，this 指向全局或 undefined（严格模式），而非该对象。

• 普通函数：obj.method() 中 this 指向 obj
• 箭头函数：const method = () => { console.log(this); } 中 this 由定义时外层作用域决定，与调用方式无关
• React 类组件中误把事件处理写成箭头函数字段（handleClick = () => {...}）是安全的，因为靠的是类实例属性；但若在方法内再定义箭头函数并传给子组件，this 就可能丢失

arguments 和 new.target 在箭头函数中不可用

箭头函数没有 arguments 对象，也不支持 new 调用（无 prototype，抛出 TypeError: xxx is not a constructor）。

使用场景：需要类数组参数或动态构造实例时，不能用箭头函数替代。

• 想访问参数列表？改用剩余参数：(...args) => args[0]，而不是 () => arguments[0]（会报 ReferenceError）
• 需要 new Fn()？必须用 function Fn() {} 或 ES6 class
• new.target 在箭头函数中为 undefined，无法做“仅允许 new 调用”的校验

不能作为 Generator 函数或使用 yield

箭头函数不支持 function* 语法，也不能在内部使用 yield —— 这不是限制，而是设计使然：它本就不具备函数体的完整控制权。

性能影响：无额外开销，但语义上已放弃对执行上下文的管理能力。

• 要写异步迭代器？必须用 async function* fetchItems() { yield ... }，不能写成 const fetchItems = async () => { yield ... }（语法错误）
• Babel 或 TypeScript 编译时不会帮你“降级”箭头 Generator，直接报错
• 某些 Linter（如 ESLint 的 require-yield）对箭头函数完全不检查，容易掩盖逻辑错误

没有 prototype 属性，也不能用 call/apply/bind 改变 this

箭头函数的 prototype 是 undefined，且 call、apply、bind 第一个参数被忽略 —— 它们根本没机会介入 this 绑定过程。

容易踩的坑：试图用 arrowFn.call(obj, arg) 强行指定上下文，结果 this 仍是外层值。

• const fn = () => this.x;，无论 fn.call({x: 1}) 还是 fn.bind({x: 2})()，this.x 都取自定义时所在作用域
• 需要动态绑定？只能换回普通函数，或用中间变量缓存 this（如 const self = this; const fn = () => self.x;）
• Vue 2 Options API 中的 methods 必须是普通函数，否则响应式失效（this 不指向 Vue 实例）

const obj = {
  value: 42,
  regular() {
    return this.value; // 42
  },
  arrow: () => {
    return this.value; // undefined（非严格模式下可能是 globalThis）
  }
};
obj.regular(); // 42
obj.arrow();   // undefined

真正难的不是记住区别，而是判断「这里到底需不需要 this 动态绑定」——多数人是在调试时才发现箭头函数让某个回调里的 this 突然空了。