箭头函数无this绑定、不可new调用、无arguments/super/new.target;适合回调保持外层this,禁用于需动态this、构造、继承或访问arguments的场景。

箭头函数没有自己的 this 绑定
这是最常踩坑的一点。箭头函数不创建自己的 this,而是沿用外层作用域的 this 值——无论怎么调用,this 都不会变。
传统函数(如 function() {} 或方法定义)在每次调用时会根据调用方式重新绑定 this:作为对象方法调用时指向该对象,被 call/apply 调用时按传入值绑定,独立调用时在非严格模式下指向 window(或 globalThis),严格模式下为 undefined。
而箭头函数的 this 在定义时就确定了,之后无法通过任何方式修改。
const obj = {
value: 42,
regular() {
return this.value; // ✅ 正常返回 42
},
arrow: () => {
return this.value; // ❌ this 指向外层(通常是 global),不是 obj
},
delayedRegular() {
setTimeout(function() {
console.log(this.value); // ❌ this 是全局对象,输出 undefined(严格模式)或报错
}, 100);
},
delayedArrow() {
setTimeout(() => {
console.log(this.value); // ✅ this 是 obj,输出 42
}, 100);
}
};
箭头函数不能用作构造函数
调用 new 一个箭头函数会直接抛出 TypeError: xxx is not a constructor 错误。
立即学习“Java免费学习笔记(深入)”;
因为箭头函数没有 [[Construct]] 内部方法,也没有 prototype 属性(ArrowFunc.prototype 是 undefined)。
- 需要实例化、需要原型链、需要继承的场景,必须用传统函数或
class -
bind、call、apply对箭头函数无效(它们本就不响应this绑定) - 箭头函数没有
arguments对象;要用参数需改用剩余参数...args
箭头函数没有 arguments、super、new.target
这些是「语法绑定」(syntactic binding)的绑定,只存在于传统函数作用域中。
箭头函数体内访问 arguments 实际读取的是外层函数的 arguments(如果外层也不是函数,则报错);同理,super 和 new.target 在箭头函数里不可用,否则会触发 ReferenceError。
function outer() {
const arrow = () => {
console.log(arguments[0]); // ✅ 输出 outer 的第一个参数
};
arrow();
}
outer('hello'); // 输出 'hello'
const badArrow = () => {
console.log(arguments); // ❌ ReferenceError: arguments is not defined
};
什么时候该用箭头函数?
核心判断依据是:你是否**依赖动态的 this 绑定**,或者是否需要**被 new 调用**。
-
回调函数(尤其是异步、事件监听器中要保持
this上下文)→ 适合箭头函数 - 对象方法、Vue/React 类组件中的方法、需要
this指向实例的逻辑 → 必须用传统函数 - 需要
arguments或写super.xxx()→ 只能用传统函数 - 纯粹的计算逻辑、map/filter 回调、工具函数 → 箭头函数更简洁,但注意闭包中的
this来源
最容易被忽略的是:在类字段中写箭头函数(如 handleClick = () => {})看似“自动绑定”,实则每次实例化都会新建函数,影响性能和 === 判断;而用 bind 或事件委托才是更可控的选择。










