箭头函数是普通函数的语法糖加行为约束，无this/arguments/prototype，其this捕获定义时外层作用域值且不可变；需动态this、构造、arguments或原型操作时必须用普通函数。
箭头函数不是“另一种函数”，而是普通函数的语法糖 + 行为约束组合体——它省略了 function 关键字，但代价是放弃对 this、arguments、prototype 的控制权。
为什么调用时 this 总不对？
这是最常踩坑的地方：普通函数的 this 在运行时动态绑定（谁调用，this 就指向谁）；而箭头函数根本没有自己的 this，它直接捕获定义时外层作用域的 this 值，且之后永不改变。
- 对象方法里写箭头函数 →
this指向外层（通常是window或undefined），不是对象本身 - 事件回调中用箭头函数 →
this不是触发事件的 DOM 元素，而是定义该箭头函数时的作用域 - 想用
call/apply/bind强行改this？无效 —— 箭头函数忽略所有显式绑定
const obj = {
name: 'Alice',
regular() { console.log(this.name); }, // ✅ 输出 'Alice'
arrow: () => { console.log(this.name); } // ❌ 输出 undefined（this 指向全局）
};
obj.regular(); // 'Alice'
obj.arrow(); // undefined
哪些场景必须用普通函数？
当需要以下任一能力时，不能用箭头函数：
- 作为构造函数（
new MyFunc()）→ 箭头函数会抛出TypeError: MyFunc is not a constructor - 需要访问
arguments对象 → 箭头函数里访问arguments会报ReferenceError，得改用 rest 参数...args - 需要修改原型链（比如挂载方法到
MyFunc.prototype）→ 箭头函数没有prototype属性 - 需要在类中定义实例方法且依赖
this绑定 → 类方法应写成普通函数或使用属性初始化器 + 箭头函数（靠闭包捕获）
// ❌ 报错：箭头函数不能 new
const Person = (name) => { this.name = name };
new Person('Bob'); // TypeError
// ✅ 普通函数可正常构造
function Person(name) { this.name = name }
const p = new Person('Bob');
什么时候该优先选箭头函数？
核心原则：只用于「不需要控制 this、不需构造、不需 arguments」的轻量回调。
- 数组方法的回调（
map、filter、reduce）→ 简洁且天然避免this丢失 - React 函数组件内部事件处理器（如
onClick={() => doSomething(id)}）→ 避免重复绑定，也规避this问题 - 封装单行计算逻辑（
const isValid = (x) => x > 0 && x ）→ 语法干净，意图明确
// ✅ 推荐：filter 回调简洁安全
[1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]
// ❌ 不推荐：在需要 this 指向对象自身时硬套箭头函数
const timer = {
delay: 1000,
start() {
setTimeout(() => {
console.log(this.delay); // ✅ 正确：this 捕获自 start()
}, this.delay);
}
};
真正容易被忽略的点是：箭头函数的「词法 this」看似省事，实则把上下文绑定时机从「调用时」提前到了「定义时」。一旦嵌套层级变深或模块拆分后作用域变化，this 的来源就变得隐晦难查——这时候宁可多写几个 function，也别靠猜。
