ES11 之 globalThis 对象和现代 JavaScript 中的全局状态-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，我们经常需要在不同的代码模块中访问全局状态，比如说在不同的函数中设置或者读取一些全局变量。但是，在 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 对象的用法，下面介绍一个具体的示例。假设我们想要在不同的模块中访问全局状态，比如说一个计时器，我们可能会写出如下的代码：

// javascriptcn.com 代码示例
// timer.js
let count = 0

function start() {
  setInterval(() => {
    console.log(`Count: ${count++}`)
  }, 1000)
}

module.exports = { start }

// main.js
const { start } = require('./timer')

start()

这段代码定义了一个计时器模块 timer.js，其中的 count 变量用来计数，start 函数用来循环输出计数的结果。在 main.js 中，我们需要调用 start 函数来启动计时器。

但是，这段代码存在一个问题：如果我们在其他模块中也需要访问 count 变量，该如何实现呢？如果直接使用 count 变量，访问的是当前模块的变量，而非全局变量。我们可能会尝试将 count 变量放到全局作用域中，但是这样会使得代码变得不够安全。

通过使用 globalThis 对象，我们可以很容易地解决这个问题。具体地，我们可以将 count 变量作为 globalThis 对象的属性来使用。这样，全局变量就可以在不同的模块中使用，而且不能被其他脚本重写。

// javascriptcn.com 代码示例
// timer.js
globalThis.count = 0

function start() {
  setInterval(() => {
    console.log(`Count: ${globalThis.count++}`)
  }, 1000)
}

module.exports = { start }

// main.js
const { start } = require('./timer')

start()

这个版本的代码不再需要我们在其他模块中访问 count 变量时做出任何更改，而是直接使用 globalThis.count 即可。同时，我们也不需要将变量放到全局作用域中，而是将其赋值给 globalThis.count 属性即可。这样，全局变量就更加安全了，因为不能被其他脚本重写。

总结

globalThis 对象是 ES11 新增的一个全局对象，为 JavaScript 中的全局变量管理带来了一些优点。通过使用 globalThis 对象，我们可以统一地访问全局状态，使得代码更加易于维护和扩展。同时，使用 globalThis 也可以更加安全地管理全局变量，避免出现一些意外的错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538d5207d4982a6eb1f278d