箭头函数可替代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 ——它们根本不起作用。

















