箭头函数没有自己的this,其this由词法作用域决定,继承自外层作用域;适用于数组回调、异步回调等需固定this的场景,但不可用作构造函数、无arguments对象、不兼容IE。

箭头函数没有自己的 this,因为它不绑定 this
箭头函数的 this 是词法作用域决定的——它直接从外层函数(或全局)继承 this 值,不创建新的执行上下文。这不是“丢失”,而是根本没定义自己的 this 绑定。所以当你在对象方法里写 () => this.xxx,this 指向的是定义时所在作用域的 this,不是调用时的对象。
常见错误现象:对象方法里用箭头函数导致 this 指向意外
比如:
const obj = {
name: 'Alice',
regularMethod() {
console.log(this.name); // 'Alice'
},
arrowMethod: () => {
console.log(this.name); // undefined(严格模式下),因为 this 指向全局或 undefined
}
};- 对象字面量中直接用箭头函数定义方法,
this不会指向该对象 - 事件监听器里用
obj.handleClick = () => {...},看似方便,但一旦把该函数传给别的上下文(如setTimeout(obj.handleClick, 100)),this仍保持原样——但这可能掩盖了本应动态绑定的需求 - Vue / React 类组件的生命周期钩子或事件回调中误用箭头函数,可能导致无法访问
this.state或this.$data
真正适合箭头函数的场景:明确需要词法 this + 简洁表达
这些地方不需要动态 this,反而要“锁住”外层上下文:
- 数组方法回调:
[1,2,3].map(x => this.scale * x),避免手动bind(this)或写function(x) { return this.scale * x; } - 异步回调中保持外层
this:setTimeout(() => this.handleTimeout(), 1000),不用再存const self = this - React 函数组件内联事件处理器(注意:是函数组件内部,不是 class 组件的方法):
—— 这里this是外层函数作用域的(不过现代 React 更推荐useState+ 普通函数) - 立即执行函数表达式(IIFE)或闭包构造器中封装私有状态
性能与兼容性提醒:别为了语法糖牺牲可读性或语义
箭头函数本身没有运行时性能优势,V8 等引擎对普通函数和箭头函数的优化程度基本一致。但要注意:
立即学习“Java免费学习笔记(深入)”;
- 不能用作构造函数:
new (() => {})报TypeError: xxx is not a constructor - 没有
arguments对象,要用剩余参数(...args) => {...} - 没有
prototype属性,typeof仍是"function",但不可被instanceof检测 - IE 完全不支持,如果项目需兼容 IE,所有箭头函数都得转译(Babel 默认处理)
最常被忽略的一点:当一个函数既可能被直接调用、也可能被作为方法调用时,强行用箭头函数会破坏调用约定——这时候宁可用 function + 显式 .bind() 或重构为类方法,也别依赖词法 this 去“猜”行为。











