抢先体验：ECMAScript 2020（ES11）中的全局对象 globalThis-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，全局对象是最常见的概念之一。在浏览器环境中，全局对象是 window，而在 Node.js 环境中，则是 global。然而，这两种全局对象在某些情况下会导致代码复杂性和可移植性的问题。为了解决这些问题，ECMAScript 2020（ES11）引入了一个新的全局对象：globalThis。

什么是 globalThis？

globalThis 是一个全局对象，它可以在任何 JavaScript 环境中使用，包括浏览器、Node.js、Web Workers、Service Workers、Web Extensions 等。

相比于 window 和 global，globalThis 的优势在于它能够提供一致的全局访问方式，无论在哪个环境中。这样一来，我们就可以编写可移植的代码，而不必担心全局对象的差异性。

如何使用 globalThis？

globalThis 可以像其他全局对象一样使用，例如：

// 在浏览器中
console.log(globalThis === window); // true

// 在 Node.js 中
console.log(globalThis === global); // true

globalThis 也可以用来访问其他全局对象：

// 在浏览器中
console.log(globalThis.Math === Math); // true

// 在 Node.js 中
console.log(globalThis.process === process); // true

在使用 globalThis 时，我们不必担心它是否存在。因为 globalThis 是 ES11 中的内置对象，所以它在任何支持 ES11 的环境中都是可用的。

globalThis 的应用场景

globalThis 的引入为我们提供了一种新的编程方式。下面是一些使用 globalThis 的实际场景：

1. 在不同环境中共享代码

如果你正在编写一个 JavaScript 应用，它需要在多个环境中运行，例如浏览器和 Node.js。在这种情况下，你可能需要使用 if 语句来检查当前环境，以决定使用哪个全局对象。

if (typeof window !== 'undefined') {
  // 在浏览器中运行
  window.alert('Hello, world!');
} else if (typeof global !== 'undefined') {
  // 在 Node.js 中运行
  global.console.log('Hello, world!');
}

使用 globalThis，你可以写出更简洁、更通用的代码：

globalThis.alert('Hello, world!');
globalThis.console.log('Hello, world!');

2. 在 Web Workers 中共享代码

在 Web Workers 中，我们需要使用 self 来访问全局对象。但是在主线程中，我们需要使用 window。这种差异性导致了代码的复杂性。

使用 globalThis，我们可以避免这种复杂性：

globalThis.addEventListener('message', function(event) {
  // 在主线程或 Web Worker 中都可以运行
});

3. 在 Service Workers 中共享代码

在 Service Workers 中，我们需要使用 self 来访问全局对象。但是在浏览器中，我们需要使用 window。这种差异性导致了代码的复杂性。

使用 globalThis，我们可以避免这种复杂性：

globalThis.addEventListener('fetch', function(event) {
  // 在浏览器或 Service Worker 中都可以运行
});

总结

globalThis 是一个全局对象，它可以在任何 JavaScript 环境中使用，包括浏览器、Node.js、Web Workers、Service Workers、Web Extensions 等。相比于 window 和 global，globalThis 的优势在于它能够提供一致的全局访问方式，无论在哪个环境中。这样一来，我们就可以编写可移植的代码，而不必担心全局对象的差异性。

在实际开发中，我们可以使用 globalThis 来避免环境差异性导致的代码复杂性。例如，在不同环境中共享代码、在 Web Workers 和 Service Workers 中共享代码等。

最后，我们需要注意的是，globalThis 是 ES11 中的新特性，因此在旧版本的 JavaScript 环境中可能不可用。如果你需要在旧版本的环境中使用 globalThis，可以使用 polyfill 来实现。

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