箭头函数作为对象方法时this不指向调用对象，因其词法绑定、无独立this，只继承定义时外层普通函数的this；全局定义则指向window或undefined，且无法通过call/apply/bind修改。
箭头函数作为对象方法时 this 指向出错，根本原因在于：它压根不遵循“谁调用、指向谁”的规则，而是完全忽略调用方式，只继承定义时外层作用域的 this。
箭头函数没有自己的 this 绑定
普通函数每次被调用时，引擎会根据调用语法（如 obj.method()）动态绑定 this。但箭头函数在词法上就“冻结”了 this —— 它不会创建执行上下文中的 this，而是直接沿作用域链向上找，直到遇到第一个非箭头函数的 this 值。
- 如果写在全局作用域，
this就是window（非严格模式）或undefined（严格模式） - 如果写在一个普通函数内部，
this就是那个普通函数执行时的this - 它永远不会因为被赋给对象属性、再通过
obj.fn()调用而改变指向
典型错误示例
看这段代码：
const obj = {
name: 'Alice',
regularMethod() {
console.log(this.name); // ✅ 输出 'Alice'
},
arrowMethod: () => {
console.log(this.name); // ❌ 输出 undefined（严格模式）或 window.name（非严格）
}
};
obj.regularMethod(); // 正常
obj.arrowMethod(); // this 不指向 obj，而是指向外层（通常是全局）
这里 arrowMethod 是箭头函数，定义时不在任何对象方法内，而是在模块/脚本顶层，所以它的 this 固定为全局上下文，和 obj 完全无关。
嵌套场景更隐蔽
即使写在对象方法里，只要用的是箭头函数，依然不认当前对象：
const obj = {
name: 'Bob',
outer() {
const innerArrow = () => console.log(this.name);
innerArrow(); // ✅ 输出 'Bob' —— 因为 outer() 的 this 是 obj，innerArrow 继承它
}
};
obj.outer(); // 正常
// 但如果把 innerArrow 提出来：
const innerArrow = () => console.log(this.name);
const obj2 = { name: 'Charlie', fn: innerArrow };
obj2.fn(); // ❌ 输出全局 name，不是 'Charlie'
关键区别在于：定义位置 决定继承源，不是调用位置。
为什么不能用 call/apply/bind 强制修正？
因为箭头函数的 this 是词法绑定，不是可配置的运行时绑定：
-
obj.arrowMethod.call(obj)—— 无效，this仍为原始外层值 -
obj.arrowMethod.bind(obj)()—— 同样无效 - 只有普通函数才响应这些显式绑定方法
这是设计使然：箭头函数刻意放弃对 this 的控制权，以简化异步回调、事件处理器中常见的 this 丢失问题（比如 setTimeout(() => {...}, 100) 中能自然访问外层 this），但也因此不适合当对象方法使用。
正确替代方案
要让方法内的 this 指向调用对象，必须用普通函数：
- 方法简写：
method() { ... } - 传统函数表达式：
method: function() { ... } - 需要绑定时，用
bind或类字段 + 箭头函数（仅限类内部）
例如：
class Person {
constructor(name) {
this.name = name;
}
// ✅ 类方法默认是普通函数
sayHi() {
console.log(`Hi, I'm ${this.name}`);
}
// ✅ 类字段箭头函数自动绑定到实例（Babel/TS 支持）
greet = () => console.log(`Hello from ${this.name}`);
}
本质上，这不是“出错”，而是按规范行为 —— 只是你误用了箭头函数的定位。
