在现代前端开发中，我们经常需要在不同的代码模块中访问全局状态，比如说在不同的函数中设置或者读取一些全局变量。但是，在 JavaScript 中，全局变量容易被意外修改或者污染，这可能会导致一些意外的错误。因此，ES11 提供了一个新的特性，即全局对象 globalThis，来规范化 JavaScript 中的全局状态管理。
什么是 globalThis 对象
globalThis 对象是 ES11 新增的全局对象，它提供了一个标准的方式来访问全局环境，而不用担心代码在不同的上下文中执行时，全局对象的实际名称和使用方法可能会不同。globalThis 对象可以在任何上下文中使用，包括浏览器中的窗口对象、Worker 线程、Node.js 等等。
在普通的浏览器环境中，globalThis 对象等价于 window 对象。在 Node.js 中，globalThis 对象等价于全局对象 global。在各种 JavaScript 运行时环境中，无论是 Web Worker、Node.js 还是浏览器中的 iframe，globalThis 都可以正确地访问全局环境中的变量和函数。
globalThis 对象的优点
globalThis 对象的出现解决了 JavaScript 中全局变量管理的一些问题，带来了以下一些优点：
- 统一的全局变量访问方式：无论在什么环境下，都可以使用一个固定的名称和使用方法来访问全局变量。
- 更加安全的全局变量管理：
globalThis不仅可以访问全局变量，还可以访问全局函数和全局属性。但不像window和global对象，globalThis对象无法被其他脚本重新赋值，这使得全局变量更加安全。 - 便于跨平台开发：如果需要编写跨平台代码，可以使用
globalThis来实现对不同环境中的全局变量的访问。
如何使用 globalThis 对象
在大多数情况下，使用 globalThis 对象的语法与使用 window 或者 global 对象的语法相同。比如说，在浏览器环境中，可以使用以下代码来访问全局变量：
// 通过 globalThis 访问全局变量 console.log(globalThis.document === document) // true // 通过 window 访问全局变量 console.log(window.document === document) // true // 直接访问全局变量 console.log(document === document) // true
在 Node.js 中，同样可以使用 globalThis 对象来访问全局变量：
// 通过 globalThis 访问全局变量 console.log(globalThis.process === process) // true // 通过 global 访问全局变量 console.log(global.process === process) // true // 直接访问全局变量 console.log(process === process) // true
一个使用 globalThis 对象的示例
为了更好地理解 globalThis 对象的用法，下面介绍一个具体的示例。假设我们想要在不同的模块中访问全局状态，比如说一个计时器，我们可能会写出如下的代码：
-- -------------------- ---- -------
-- --------
--- ----- - -
-------- ------- -
-------------- -- -
------------------- ------------
-- -----
-
-------------- - - ----- -
-- -------
----- - ----- - - ------------------
-------这段代码定义了一个计时器模块 timer.js，其中的 count 变量用来计数，start 函数用来循环输出计数的结果。在 main.js 中，我们需要调用 start 函数来启动计时器。
但是，这段代码存在一个问题：如果我们在其他模块中也需要访问 count 变量，该如何实现呢？如果直接使用 count 变量，访问的是当前模块的变量，而非全局变量。我们可能会尝试将 count 变量放到全局作用域中，但是这样会使得代码变得不够安全。
通过使用 globalThis 对象，我们可以很容易地解决这个问题。具体地，我们可以将 count 变量作为 globalThis 对象的属性来使用。这样，全局变量就可以在不同的模块中使用，而且不能被其他脚本重写。
-- -------------------- ---- -------
-- --------
---------------- - -
-------- ------- -
-------------- -- -
------------------- -----------------------
-- -----
-
-------------- - - ----- -
-- -------
----- - ----- - - ------------------
-------这个版本的代码不再需要我们在其他模块中访问 count 变量时做出任何更改，而是直接使用 globalThis.count 即可。同时，我们也不需要将变量放到全局作用域中，而是将其赋值给 globalThis.count 属性即可。这样，全局变量就更加安全了，因为不能被其他脚本重写。
总结
globalThis 对象是 ES11 新增的一个全局对象，为 JavaScript 中的全局变量管理带来了一些优点。通过使用 globalThis 对象，我们可以统一地访问全局状态，使得代码更加易于维护和扩展。同时，使用 globalThis 也可以更加安全地管理全局变量，避免出现一些意外的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6538d5207d4982a6eb1f278d