在 JavaScript 中,全局对象可以通过 window
(在浏览器环境下) 或 global
(在 Node.js 环境下) 来访问。然而,在一些情况下,访问全局对象可能会更加复杂,例如在多种运行时环境中使用相同的代码时,或在一个沙箱环境中执行代码时。
在 ES11 中,globalThis
这个新的内置变量解决了这个问题,它可以正确的访问任意环境的全局对象。这个变量使开发人员不再需要考虑运行时环境的差异性,能够在任何情况下获取一个指向全局对象的引用。
什么是 globalThis?
globalThis
是一个新的内置对象,它在 ES11 (ECMAScript 2020) 中被引入。这个对象表示当前的全局对象,它可以在任何运行时环境中被访问,包括浏览器和 Node.js。
不同于 window
或 global
,globalThis
是一个全局变量,它不会和局部变量有任何冲突。因此,在任何环境中,你都可以像这样使用它:
console.log(globalThis);
通过这个简单的代码,你就可以在不同的环境中正确访问全局对象了。
为何需要 globalThis?
在现代的 JavaScript 应用中,代码往往会在各种环境 (如 Web Worker,iframe 等) 中运行。如果你没有使用 globalThis
来获取全局对象,当你在不同环境中执行同样的代码时,你可能会遇到一些困难。
例如,在浏览器环境下,你可以访问全局对象使用的是 window
,而在 Node.js 中,你需要使用的是 global
。这也就意味着你需要写一些不同的代码来适应不同的环境,这会增加你的工作量和代码的复杂度。
另外,如果你想在一个沙箱环境中执行代码 (比如像 CodePen、JSFiddle 或者 Chrome DevTools 中的 Console 中执行代码),你不得不使用一些黑科技 (比如使用 eval
,传入一个定义了全局对象的字符串) 来访问全局变量。这样做的问题是它意味着你的代码可能不再安全,而且不可靠。
因此,globalThis
帮助你解决了这些问题,它提供了一种简洁、标准的方式来访问全局对象,让你在任何环境中都能正确的获取全局对象。
如何在项目中使用 globalThis?
由于 globalThis
是一个新的特性,因此你需要确保你的运行环境是支持它的。常见的浏览器和 Node.js 环境都已经支持了这个特性,因此你可以放心使用它。
下面是一个简单的示例,展示了如何在项目中使用 globalThis
:
const globalObject = typeof window !== "undefined" ? window : globalThis;
在这个代码中,我们首先检查了是否存在浏览器环境中的 window
对象 (使用 typeof
运算符),如果不存在,则使用 globalThis
对象代替。
当然,这个代码中也可以使用一个更加简洁的语法:
const globalObject = globalThis || window || global;
这样,在任何环境下你都可以获取到全局对象了。
总结
在 ES11 中,globalThis
这个新的内置对象使你能够在不同的环境中轻松的访问全局对象。它提供了一种标准的方式,让你不必再使用黑科技的方式来访问全局对象,而且也不必再花费大量的时间来适应不同的环境。
在你的项目中使用 globalThis
是非常简单的,你只需要确保你的运行环境支持它,然后就可以愉快的访问全局对象了。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/652d0d297d4982a6ebe88df9