为什么浏览器中"this"的绑定与node.js中的绑定不同？

Question

我试图完全理解普通函数和箭头函数之间的区别，并查看了此页面。

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

如果我将示例代码复制粘贴到浏览器中，我会得到 100 150 200，而不是本教程中的预期。显然，在正常函数中声明的"this"也指向浏览器中的外部作用域，这与 Node.js 不同。

有人可以解释为什么吗？

Answer 1

这些函数在 Node.js 和浏览器中的行为相同。它实际上是

console.log(this.a)

不同的部分。

浏览器中<script>元素中的代码在全局范围内运行。在全局范围内，this是指全局对象。此this.a = 100将创建一个全局变量a。

在 Node 中，大多数代码都位于CommonJS 模块中。在模块内部，this是指模块的导出(this === module.exports)，而不是全局对象。因此console.log(this.a)将使用名称a而不是全局变量访问导出。

在这两种情况下，this"普通"函数(称为函数)内部都是指全局对象。

---

您可以在两种环境中运行以下命令，以验证函数内部和外部的this是否相同：

const outsideThis = this;
(function() {
console.log(this === outsideThis);
}());

它将在浏览器中true，在 Node 中false。

在节点中运行以下命令：

exports.a = 42;
global.b = 21;
console.log(this.a, this.b); // 42, undefined (i.e. `this` refers to exports)
(function() { 
console.log(this.a, this.b); // undefined, 21
}());                          // (i.e. `this` refers to the global object)