箭头函数不是语法糖，它与普通函数在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）。
立即学习“Java免费学习笔记（深入）”；
使用场景：需要类数组参数或动态构造实例时，不能用箭头函数替代。
- 想访问参数列表？改用剩余参数：
(...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）
}
};
<p>obj.regular(); // 42
obj.arrow(); // undefined真正难的不是记住区别，而是判断「这里到底需不需要 this 动态绑定」——多数人是在调试时才发现箭头函数让某个回调里的 this 突然空了。
