ECMAScript 2020 (ES11) 新特性:globalThis-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，JavaScript 是主流编程语言之一，它的标准化由 ECMA 国际组织所进行。自从 1997 年第一版 ECMAScript 出现后， JavaScript 在不断地更新迭代。在本文中，我们将介绍 ECMAScript 2020 (ES11) 的新特性 globalThis，让我们一起来了解！

什么是 globalThis？

globalThis 是一个可以在任何环境下都能够访问的全局变量。无论是在浏览器、服务器、Node.js 还是在 Web Worker 中，都可以通过 globalThis 访问全局作用域。这很有用，因为不同的 JavaScript 运行时环境和宿主对象中，全局作用域是由不同的变量来代表的（Window、global、self 等），使用 globalThis 可以使得我们能够方便地通过一个名称来访问全局变量，避免了对于不同环境写特定的代码。

如何使用 globalThis？

globalThis 可以在任何 JavaScript 环境中使用。我们可以通过以下方式访问它：

console.log(globalThis);

除了简单的方式来访问 globalThis，它还可以用于跨平台的需要，例如在浏览器和 Node.js 中实现相同的 API。

为什么要使用 globalThis？

在过去，访问全局变量的方式很麻烦。例如在浏览器中通过 Window 访问全局变量，而在 Node.js 中则需要使用 global 或者 module.exports。这样就会导致一些跨平台的兼容性问题。globalThis 提供了一种简单的、可靠的解决方案，可帮助我们在代码中跨平台地访问全局变量，为我们提供更加流畅的开发体验。

globalThis 和其他全局变量的区别

在 JavaScript 中，全局变量可以有多种标识符，例如 Window、global、self 等。虽然它们代表的变量都是全局变量，但是它们只能在特定的环境中使用。下面我们来看一下 globalThis 和其他全局变量的区别。

对于浏览器中的全局变量 Window，我们在 Worker 中是无法访问的。而 globalThis 则可以在 Worker 中访问到全局变量。

// 以下代码运行在 Worker 中，直接访问 window 会抛出 ReferenceError
console.log(window); // ReferenceError: window is not defined

// 使用 globalThis 可以成功地访问全局变量
console.log(globalThis); // 输出: [object global] (Node.js), [object Window] (浏览器环境下)

对于 Node.js 中的全局变量 global，其行为在一定程度上与浏览器中的 Window 相似，而 globalThis 则遵循的是标准的全局作用域规范。

// 以下代码运行在 Node 环境下，直接访问 window 会抛出 ReferenceError
console.log(window); // ReferenceError: window is not defined

// 虽然在 Node 环境下访问 window 是会抛出错误的，但是可以通过使用 global 变量来访问全局变量
console.log(global); // 输出: [object global] (Node.js)

// 使用 globalThis 可以跨平台地访问全局变量
console.log(globalThis); // 输出: [object global] (Node.js), [object Window] (浏览器环境下)

示例代码

下面是一个简单的 JavaScript 示例，演示了如何使用 globalThis 访问全局作用域。

// javascriptcn.com 代码示例
function getGlobal() {
  if (typeof globalThis !== 'undefined') {
    return globalThis; // 全局作用域存在于 globalThis 中
  }
  if (typeof self !== 'undefined') {
    return self;
  }
  if (typeof window !== 'undefined') {
    return window;
  }
  if (typeof global !== 'undefined') {
    return global; // Node 环境下全局作用域存在于 global 变量中
  }
}

const global = getGlobal();
console.log(global); // 对于浏览器中运行此代码，输出: [object Window]，对于 Node.js 环境下运行此代码，输出: [object global]

总结

globalThis 是 ECMAScript 2020 的一个新特性，它提供了一种简单的、可靠的方式来访问任何环境下的全局变量。通过使用 globalThis，我们可以编写跨平台、一致性的代码，避免在不同的平台和环境下写特定的代码。globalThis 的出现将会使得 JavaScript 在不同的环境下运行更加轻松、简洁，让开发效率大大提升。

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