在 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