箭头函数不能用于需动态this、独立执行上下文或构造行为的场景,因其无this/arguments/super/new.target,不可new调用;对象方法、原型方法、构造函数、事件回调及需arguments的函数均应使用普通函数。

箭头函数不能用在需要动态 this、独立执行上下文或构造行为的场景。它没有自己的 this、arguments、super、new.target,也不能被 new 调用。一旦误用,轻则逻辑出错,重则直接报错。
对象字面量中的方法
对象方法依赖运行时绑定的 this 指向自身,而箭头函数会捕获外层作用域的 this(通常是 window 或 undefined),导致无法访问对象属性。
- ❌ 错误写法:
const obj = { name: 'Alice', getName: () => this.name };→ 返回undefined - ✅ 正确写法:
getName() { return this.name; }或getName: function() { return this.name; }
原型链上的方法
在 prototype 上定义方法时,this 应指向实例对象。箭头函数跳过实例上下文,始终继承定义时的外部 this,破坏原型继承语义。
- ❌ 错误写法:
MyClass.prototype.say = () => this.name;→this不是实例 - ✅ 正确写法:
MyClass.prototype.say = function() { return this.name; };
构造函数
箭头函数没有 [[Construct]] 内部方法,不能通过 new 调用,否则抛出 TypeError: xxx is not a constructor。
- ❌ 错误写法:
const Person = (name) => { this.name = name; }; new Person('Bob'); - ✅ 正确写法:
function Person(name) { this.name = name; }或class Person { constructor(name) { this.name = name; } }
需要动态 this 的事件回调
DOM 事件监听器中常需访问触发元素(即 this 指向当前 event.currentTarget)。箭头函数固化了外层 this,导致无法获取目标元素。
- ❌ 错误写法:
btn.addEventListener('click', () => console.log(this.textContent));→this是全局对象 - ✅ 正确写法:
btn.addEventListener('click', function() { console.log(this.textContent); });或使用event.target配合箭头函数
需要 arguments 或 caller 的函数
箭头函数不绑定 arguments 对象,也无 caller 属性。若逻辑依赖参数列表或调用栈信息,必须改用普通函数。
- ❌ 错误写法:
const logArgs = () => console.log(arguments);→ 报ReferenceError - ✅ 正确写法:
function logArgs() { console.log(arguments); }或用剩余参数(...args) => console.log(args)











