在前端开发中,全局作用域是我们经常使用的一个概念。在 ES5 及之前的版本中,我们可以通过 window
对象来访问全局作用域中的变量和函数。但是,在一些特殊情况下,如 Node.js 环境中,window
对象并不存在。为了解决这个问题,ES12 新增了 globalThis
对象,它可以在任何环境下访问全局作用域。
globalThis
对象的介绍
globalThis
是一个全局对象,可以在任何环境下访问。它的作用类似于 window
对象,但是它更加通用。在浏览器环境下,globalThis
对象和 window
对象是相同的;在 Node.js 环境下,globalThis
对象和 global
对象是相同的。
globalThis
对象有以下特点:
- 它是一个全局对象,可以在任何作用域中访问。
- 它包含了所有全局对象的属性和方法。
- 它是一个只读对象,无法修改它的属性和方法。
globalThis
对象与全局作用域的差别
虽然 globalThis
对象和全局作用域都可以访问全局变量和函数,但是它们之间还是有一些差别的。
- 作用域链不同
全局作用域中的变量和函数是通过作用域链来访问的。当我们在一个函数中访问一个变量或函数时,JavaScript 引擎会从当前函数的作用域开始,逐级向上查找,直到找到全局作用域为止。
而 globalThis
对象中的变量和函数可以直接通过 globalThis
对象来访问,不需要经过作用域链的查找。
- 属性和方法不同
全局作用域中的属性和方法是通过全局对象来访问的。在浏览器环境下,全局对象是 window
对象;在 Node.js 环境下,全局对象是 global
对象。
而 globalThis
对象中包含了所有全局对象的属性和方法,可以在任何环境下使用。例如,在浏览器环境下,我们可以通过 globalThis.setTimeout
来调用 setTimeout
函数。
使用 globalThis
对象的示例
下面是一个使用 globalThis
对象的示例代码:
// 在浏览器环境下 globalThis.setTimeout(() => { console.log('Hello, world!'); }, 1000); // 在 Node.js 环境下 globalThis.console.log('Hello, world!');
在浏览器环境下,我们可以使用 globalThis.setTimeout
来调用 setTimeout
函数。在 Node.js 环境下,我们可以使用 globalThis.console.log
来输出日志信息。
总结
globalThis
对象是 ES12 新增的一个全局对象,可以在任何环境下访问全局作用域中的变量和函数。虽然 globalThis
对象和全局作用域都可以访问全局变量和函数,但是它们之间还是有一些差别的,包括作用域链和属性和方法的访问方式。在实际开发中,我们可以根据具体的需求来选择使用哪种方式来访问全局变量和函数。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66402c07d3423812e4e513e3