JavaScript箭头函数与普通函数中this的差异及原因咨询

先看你给出的两段代码及执行结果：

第一段：箭头函数示例 #

let myObject = { objectName: () => { console.log(this); } };
myObject.objectName();

执行输出：{ }

第二段：普通函数示例 #

let myObject = { objectName: function() { console.log(this); } };
myObject.objectName();

执行输出：{ objectName: [Function: objectName] }

为什么会有这种差异？ #

核心原因是箭头函数和普通函数的this绑定规则完全不一样：

• 普通函数的this：“调用时绑定”
  普通函数的this就像个“墙头草”，它的值完全由谁调用它决定。比如第二段代码里，objectName是被myObject这个对象调用的（myObject.objectName()），所以this就直接指向调用它的myObject，输出自然包含了myObject里的objectName函数。

• 箭头函数的this：“定义时继承”
  箭头函数根本不会自己创建属于自己的this，它的this是从定义它的外层作用域“继承”过来的，而且一旦确定就再也不会变。在你的第一段代码里，箭头函数是在全局作用域下定义的（let myObject属于全局上下文），当前环境中全局作用域的this是一个空对象，所以箭头函数就继承了这个空对象的this——哪怕你用myObject去调用它，它也不会改变自己的this指向。

简单总结：普通函数看“谁调用”，箭头函数看“在哪出生”。

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