箭头函数的 this 指向外层作用域的 this，它不绑定自身 this，而是在定义时固化外层函数的 this 值；普通函数则每次调用时根据调用方式动态绑定 this。
箭头函数的 this 指向外层作用域的 this
箭头函数不绑定自己的 this，它直接沿用定义时所在词法作用域的 this 值。这不是运行时动态查找，而是在函数创建时就确定了绑定关系——也就是说，this 的值在箭头函数被声明的那一刻就“固化”了。
这和普通函数形成鲜明对比：function 声明的函数每次调用时会根据调用方式（如 obj.method()、fn.call(obj)、独立调用）重新绑定 this；而箭头函数完全跳过这一步。
为什么箭头函数没有自己的 this？
这是语言设计上的有意取舍，核心目标是解决回调中常见的 this 丢失问题。早期写法常需手动绑定：setTimeout(function() { this.doSomething(); }.bind(this), 100)，或者用变量暂存：const self = this;。箭头函数让这种场景更简洁自然。
背后机制是：ECMAScript 规范明确要求箭头函数不具有 [[ThisBindingStatus]] 内部状态，也不参与 this 绑定过程。它的 this 查找方式等同于普通变量 —— 向外层函数作用域逐级搜索 this 绑定。
立即学习“Java免费学习笔记（深入）”；
常见错误现象与使用场景
最容易踩坑的是在对象方法中误用箭头函数：
const obj = {
name: 'Alice',
regular() {
console.log(this.name); // 'Alice'
},
arrow: () => {
console.log(this.name); // undefined（this 指向全局或 undefined（严格模式））
}
};
obj.regular(); // 正常
obj.arrow(); // 不按预期工作
- 在事件监听器、
setTimeout、Promise.then等异步回调中用箭头函数，通常能避免this丢失 - 但绝不能在需要动态
this的地方用它，比如 Vue/React 类组件的方法、jQuery 插件回调（依赖this指向 DOM 元素） - 箭头函数也不能用
call/apply/bind强制改变this，这些方法对它完全无效
this 的实际表现取决于定义位置，而非调用位置
关键要盯住「定义时的外层函数」的 this 是什么。例如：
function makeHandler() {
return () => {
console.log(this.value);
};
}
const obj = { value: 42 };
const handler = makeHandler.call(obj); // 这里绑定了外层 this
handler(); // 输出 42
上面例子中，handler 是箭头函数，但它捕获的是 makeHandler 被调用时的 this（即 obj），不是 handler() 被调用时的上下文。
如果外层函数本身也没绑定 this（比如顶层箭头函数嵌套在全局箭头函数里），那最终可能落到全局对象或 undefined，这点很容易被忽略。
