Node.js与浏览器中this指向差异及原理分析

前言

熟悉JavaScript的开发者都知道，this关键字的指向会因运行环境的不同而变化。让我们先看一段示例代码：

var type = 1
function toWhere(){
	this.type = 2;
}
toWhere();
console.log(type)

大家可能会产生这样的直觉：

代码中声明了一个全局变量type并赋值为1。随后调用toWhere函数，函数内部通过this.type=2进行赋值。在浏览器环境中，此时this指向全局对象window，因此执行后全局变量type的值变为2。

最后打印全局变量type，结果显而易见为2。

在浏览器中验证上述代码，控制台确实输出了数字2。

然而，事情真的到此为止了吗？

如果你熟悉Node.js环境，尝试使用Node.js重新执行上述代码，你会发现结果截然不同。

此时控制台输出的结果是1，这与我们预期的2不符，令人困惑。

相关调试

从上述示例可以看出，完全相同的JavaScript代码在浏览器和Node.js环境中运行结果不同。

这主要归因于this指向机制的差异，且这种指向与我们在浏览器中的常规认知不同，其根本原因在于Node.js的工作机制。

var type = 1
function toWhere() {
 this.type = 2
 console.log("函数中this指向",this)
}
toWhere()
console.log(type)
console.log("全局中this",this)

1、打印浏览器中的this

在浏览器中，函数内的this指向window，全局作用域中的this同样指向window。

2、打印nodeJs中的this

观察输出结果可以发现，函数内部的this指向了Object [global]。

当我们在函数内对this进行赋值时，实际上是将属性挂载到了global对象上。因此，这不会改变文件顶层this的值（即那个空对象{}）。

Node原理解析

那么，为什么会发生这种情况呢？

我们需要先了解Node.js的工作机制。

在浏览器中，脚本文件直接在全局范围内执行。

而在Node.js中，Node会将代码隐藏在一个立即执行的匿名函数中，你可以通过global变量来访问真正的全局范围。

在前面的解释中，我们发现在文件顶层打印this时，它指向一个空对象{}。实际上，Node.js中运行的任何文件都被包裹在这个空对象{}中，这意味着脚本文件都在自己的闭包中执行，类似于以下结构：

{
	(function(){
		//脚本文件
	})()
}

在前面的例子中，函数外部的this指向空对象{}，而函数内部的this如果没有指定的执行上下文，则指向global对象（即可以访问该匿名函数执行上下文的全局范围）。

总结

至此，关于Node.js与浏览器中this关键字差异的介绍已完成。如需了解更多Node.js中this关键字的相关内容，请搜索本站以前的文章或继续浏览下面的相关文章。希望大家以后多多支持本站！