ES12 中的全局变量 globalThis 的详解-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，全局变量是指可以在程序的任何位置都能访问到的变量，在浏览器环境下，全局变量通常是指 window 对象，而在 Node.js 环境下，全局变量通常是指 global 对象。ES2020 引入了一个新的全局变量 globalThis，它能够在不同的 JavaScript 运行环境中保证一致性，本文将详细介绍 globalThis 的使用方法和意义。

globalThis 的概述

globalThis 是一个全局变量，它指向当前的全局对象。在浏览器中，globalThis 指向 window 对象，在 Node.js 环境中，globalThis 指向 global 对象。在不同的 JavaScript 运行环境中，globalThis 可以用于在全局作用域中获取全局对象。

下面是一个简单的例子，展示了如何在不同的运行环境中使用 globalThis：

if (typeof window !== "undefined") {
  console.log(globalThis === window); // true
} else if (typeof global !== "undefined") {
  console.log(globalThis === global); // true
} else if (typeof self !== "undefined") {
  console.log(globalThis === self); // true
}

在这个例子中，我们首先判断当前的运行环境是浏览器、Node.js 还是 Web Worker，然后使用 globalThis 获取全局对象。如果在浏览器环境中运行这段代码，它会输出 true，因为 globalThis 指向 window 对象。

globalThis 的用途

globalThis 有几个常见的用途：

1. 在不同的 JavaScript 运行环境中获取全局对象

如上所示，globalThis 可以在不同的 JavaScript 运行环境中获取全局对象。这在编写跨平台 JavaScript 应用程序时非常有用，因为它可以帮助你在应用程序中访问全局对象并执行特定的操作。

2. 在同一应用程序内共享全局状态

通过 globalThis，你可以在不同的代码模块或不同的 JavaScript 文件之间共享全局状态，这可以帮助你更好地组织代码，并使其更易于维护。在 Node.js 环境中，global 对象是可以在不同的 Node 模块之间共享状态的，globalThis 的出现可以统一不同 JavaScript 运行环境中的行为，让不同的运行环境也能够实现共享全局状态。

3. 与异步编程结合使用

globalThis 也可以与 Promise、async/await 等异步编程技术结合使用。例如，你可以在以上异步编程技术的回调函数中使用 globalThis，以此来访问全局对象。

globalThis 示例代码

接下来，我们来看一些具体的 globalThis 示例代码。

在浏览器中获取全局对象

if (typeof globalThis !== "undefined") {
  console.log(globalThis === window); // true
} else {
  console.log("globalThis is not supported");
}

在浏览器中，globalThis 指向 window 对象。这段代码首先检查是否支持 globalThis，如果支持，就打印出 true；否则，打印出 "globalThis is not supported"。

在 Node.js 中获取全局对象

if (typeof globalThis !== "undefined") {
  console.log(globalThis === global); // true
} else {
  console.log("globalThis is not supported");
}

在 Node.js 环境中，globalThis 指向 global 对象。这段代码首先检查是否支持 globalThis，如果支持，就打印出 true；否则，打印出 "globalThis is not supported"。

共享全局状态

// file1.js
globalThis.foo = "bar";

// file2.js
console.log(globalThis.foo); // 输出 "bar"

在这个例子中，我们在 file1.js 文件中设置了全局变量 foo，然后在 file2.js 文件中打印了这个全局变量。由于 globalThis 是全局变量，因此在所有 JavaScript 文件中都可以使用它，这使得共享全局状态变得更加容易。

结论

globalThis 提供了一种新的方式，可以在不同的 JavaScript 运行环境中获取全局对象，并与异步编程技术结合使用以共享全局状态。它的出现为跨平台 JavaScript 应用程序的开发提供了更好的支持，同时也可以统一不同 JavaScript 运行环境中的行为。在实际应用中，我们可以针对具体场景进行选择，选用与之相应的 JavaScript 运行环境和全局变量进行开发，以提高开发效率和应用程序性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67205e0c2e7021665e01eda0