为何浏览器与Node.js中this的绑定机制存在差异？

嘿，这个问题的核心在于浏览器和Node.js的全局执行上下文规则完全不同，咱们一步步拆解你遇到的现象：

1. 浏览器全局环境的this指向 #

在浏览器的全局作用域中，this直接指向window对象——这是浏览器的默认规则。所以你开头写的：

this.a = 100;

本质上就是给window.a赋值，第一次console.log(this.a)输出100，就是读取window.a的值。

2. 箭头函数的this绑定逻辑 #

箭头函数没有自己的this，它的this是继承自外层作用域的this。所以你调用arrowFunc()时，函数内部的this依然指向window，执行this.a = 150就是把window.a改成了150，第二次console.log自然输出150，这部分和你预期的应该一致。

3. 普通函数直接调用时的this（浏览器场景） #

当你直接调用普通函数regFunc()（没有通过对象方法、构造函数、call/apply/bind改变this指向），在浏览器的全局环境下，这个函数内部的this同样指向window！所以regFunc()里的this.a = 200还是在修改window.a，第三次console.log(this.a)就输出了200——这就是你觉得和教程不符的原因，大概率教程里的示例是基于Node.js环境的。

4. Node.js环境的差异点 #

Node.js的全局执行上下文规则和浏览器完全不同：

• 在Node.js的模块文件中，顶层作用域的this指向的是当前模块的exports对象（默认是空对象），而不是全局的global对象。所以你写this.a = 100，其实是给module.exports.a赋值，而非global.a。
• 当直接调用普通函数regFunc()时，Node.js中普通函数的默认this指向global对象，所以this.a = 200是给global.a赋值。这时候你console.log(this.a)读取的是模块里的this（即exports.a），所以结果会和浏览器完全不一样。

举个Node.js里的验证例子：

this.a = 100; 
let arrowFunc = () => {this.a = 150};
function regFunc() { this.a = 200; }
console.log(this.a) // 输出100（来自exports.a）
arrowFunc()
console.log(this.a) // 输出150（修改的是exports.a）
regFunc()
console.log(this.a) // 还是150（regFunc修改的是global.a，和exports.a无关）
console.log(global.a) // 输出200

这样对比下来，你就能明白为什么浏览器和Node.js里的执行结果会有差异啦！

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