为何JavaScript中箭头函数作为回调时this指向存在差异？

箭头函数与普通函数的this绑定逻辑存在本质区别：普通函数的this是调用时确定的，而箭头函数没有独立的this，它的this继承自定义时所在的词法作用域的this，一旦定义就固定，不会随调用方式改变。下面针对两个示例逐一分析：

第一个示例解析 #

myObject = {
  myMethod: function () {
    helperObject.doSomethingAsync('superCool', () => {
      console.log(this); // this === myObject
    });
  },
};

• myMethod是普通函数，当它作为myObject的方法被调用时，按照普通函数的规则，this会指向调用它的对象myObject。
• 箭头函数定义在myMethod的内部作用域中，此时它会直接继承当前作用域的this（也就是myMethod的this，即myObject）。无论doSomethingAsync以何种方式调用这个箭头函数，它的this都不会发生变化。

第二个示例解析 #

const reusabledCallback = () => {
  console.log(this); // this === window or global object
};

myObject = {
  myMethod: function () {
    helperObject.doSomethingAsync('superCool', reusabledCallback);
  },
};

• reusabledCallback是在全局作用域下定义的箭头函数，此时它所在的词法作用域的this就是全局对象（浏览器环境为window，Node.js环境为globalThis）。
• 即便后续将它作为参数传入myMethod中调用，箭头函数的this依然是定义时绑定的全局对象——因为箭头函数从一开始就没有“调用时绑定this”的特性，它的this是静态固定的。

简单总结：你的原有认知仅适用于普通函数，箭头函数的this绑定规则是“定义时确定”而非“调用时确定”，这是两者的核心差异。

内容的提问来源于stack exchange，提问作者user6377312