ES2020 引入了一个新的全局对象 globalThis，让前端开发者在不同的环境下访问全局变量变得更加方便。在本文中，我们将介绍 globalThis 的用法、示例代码以及相应的注意事项，帮助你更好地掌握这一 ES2020 的新特性。
为什么需要 globalThis？
在以往的 JavaScript 版本中，前端开发者可以通过 window （浏览器环境下）或 global （Node.js 环境下）来访问全局变量。然而，不同的 JavaScript 运行环境可能有不同的全局对象，而且还存在一些情况下需要访问全局对象而无法确定具体的运行环境。例如，通过 IFrame 嵌入网页或使用 Web Worker 运行 JS 脚本等情况下，我们必须访问正确的全局对象才能正常地使用应用程序。
为了解决这一问题，ES2020 引入了全局对象 globalThis，它是一个全局可用的对象，可以在任何运行环境下进行访问。这一特性为前端开发者提供了一个通用的全局对象，使得在不同的运行环境下访问全局变量变得更加方便和简单。
如何使用 globalThis？
在 ES2020 中，我们可以通过 globalThis 来访问全局变量。例如，在浏览器环境下，可以通过以下代码来访问全局变量：
console.log(globalThis.document === window.document); // true
在 Node.js 环境下，可以通过以下代码来访问全局变量：
console.log(globalThis.Buffer === global.Buffer); // true
通过这种方式，我们可以在不同的运行环境下方便地访问正确的全局变量，从而使我们的应用程序更加健壮和可靠。
示例代码
下面是一个使用 globalThis 的示例代码，它可以在所有的 JavaScript 运行环境下运行：
-- -------------------- ---- -------
----- ------------ - ------ ------ --- -----------
- ------
- ------ ------ --- -----------
- ------
- ------ ---- --- -----------
- ----
- -----------
--------------------------这个代码片段将根据当前的运行环境动态选择正确的全局对象，从而确保我们可以在所有情况下访问正确的全局变量。可以看到，在浏览器环境下，我们将使用 window 对象，而在 Node.js 环境下，我们将使用 global 对象。
注意事项
使用 globalThis 时需要注意以下几点：
- 请勿与其他全局对象混淆，例如
window或global。 - 请注意在不同的运行环境下可能存在全局变量的差异。
- 在使用
globalThis时请考虑代码兼容性问题，尽可能使用兼容性更好的方式来访问全局变量。
总结
globalThis 是 ES2020 中引入的全局对象，它为前端开发者提供了一个通用的全局对象，方便了我们在不同的运行环境下访问全局变量。本文介绍了 globalThis 的用法、示例代码以及注意事项，希望能够帮助你更好地掌握这一 ES2020 的新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b822148841e9894847e9b