箭头函数可替代function写回调，但需注意无this、无arguments、不能new；单参数单表达式可简写，多参数或语句块需括号和花括号；其this由外层词法作用域决定，无法通过bind/call/apply修改。
箭头函数怎么替代 function 写回调？
直接替换就行，但得注意语法糖背后的约束。比如 Array.prototype.map 常见写法：
[1, 2, 3].map(function(x) { return x * 2; })
换成箭头函数就是：
[1, 2, 3].map(x => x * 2)
单参数 + 单表达式可省括号和 return；多参数或带语句块就得加括号和花括号：
[1, 2, 3].map((x, i) => ({ value: x, index: i }))
为什么 this 不再指向调用对象？
因为箭头函数没有自己的 this，它沿用外层普通函数的 this 值——也就是词法作用域绑定。常见坑：
const obj = {
value: 42,
regular() { console.log(this.value); },
arrow: () => { console.log(this.value); }
};
obj.regular() 输出 42，但 obj.arrow() 输出 undefined（this 指向全局或 undefined，取决于严格模式）。如果你在事件监听器里用箭头函数：
button.addEventListener('click', () => this.handleClick())
这里的 this 是定义时所在上下文的 this，不是 button。
哪些回调不能无脑换箭头函数？
三类典型场景要留神：
-
setTimeout或setInterval里需要动态this时（比如类方法中依赖实例状态） - 需要访问
arguments对象——箭头函数没有arguments，得用剩余参数...args - 作为构造函数被
new调用——箭头函数不能当构造函数，会直接报TypeError: xxx is not a constructor
嵌套回调里用箭头函数真能避免 that = this？
能，而且是它最实在的价值之一。以前写 AJAX 回调常这么绕：
var that = this;
$.get('/api', function(data) {
that.update(data); // 避免 this 指向 xhr
});
现在：
$.get('/api', data => this.update(data))
干净利落。但注意：如果外层已经是箭头函数（比如 React 函数组件内部），那再嵌套一层箭头函数，this 还是拿不到——因为函数组件本身没 this。这时候靠闭包变量或 useCallback 更靠谱。
真正容易被忽略的是：箭头函数的词法作用域在定义时就锁死了，运行时改不了。哪怕你用 bind、call、apply 也影响不了它的 this ——它们根本不起作用。
