JavaScript中this关键字作为回调和普通方法调用时指向不同的原因是什么

this的指向和函数的定义位置、在哪声明没有任何关系，完全由函数被调用的实际方式决定，不存在天生绑定的“所属对象”。

两种调用方式的差异 #

直接调用 myObj.showName() #

这是标准的对象方法调用模式：函数调用时前面有明确的调用主体myObj，JS会自动将this绑定到该调用主体上，所以此时this指向myObj，也就是你理解的“所属对象”。

作为事件回调传入 #

当你执行window.addEventListener('load', myObj.showName)时，本质上只是把showName对应的函数本身提取出来传给了事件回调，没有保留该函数和myObj的绑定关系。等到load事件触发时，浏览器是直接调用这个独立的函数，没有挂载在任何对象上执行，非严格模式下这种无主体调用的this默认会指向全局window对象。
等效的执行逻辑如下：

// 第一步：提取函数本身，和myObj解绑
const callback = myObj.showName;
// 第二步：事件触发时直接调用，没有调用主体
callback();

这种场景下你并没有把函数作为myObj的方法调用，只是复用了函数的代码逻辑，自然不存在“所属对象还是myObj”的说法，绑定关系会根据调用方式变化。

构造函数内部this和方法内部this的差异 #

两者的绑定逻辑完全统一，没有本质区别，都遵循调用方式决定指向的规则：
构造函数是通过new关键字调用的，new操作符会自动创建一个空实例，并且将构造函数内部的this绑定到这个新实例上，再执行构造函数内的代码，所以this.name = name里的this就是新生成的实例对象。
而showName方法内部的this，同样遵循调用规则：用myObj.showName()调用就指向myObj，作为无主体的回调调用就指向window，和它是在构造函数里定义的没有任何关系。

常用的固定this方案 #

如果你需要事件回调里的this仍然指向myObj，可以用两种常用方案：

• 箭头函数包裹：window.addEventListener('load', () => myObj.showName())，调用时明确指定了调用主体为myObj
• 手动绑定：window.addEventListener('load', myObj.showName.bind(myObj))，用bind方法将this永久绑定到myObj上

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