ECMAScript 2020：全局对象 globalThis 解析
ECMAScript 2020 标准推出了一个全新的全局对象 globalThis，它提供了一种通用的方式来获取全局上下文中的 this 对象。在早期的 JavaScript 版本中，全局对象是 window（浏览器环境）或 global（Node.js 环境），但是在其他环境下使用时会出现问题，例如在 Web Worker 中，没有 window 对象。
globalThis 的引入解决了这个问题，它提供了一个标准化的方式来获取全局对象，能够在任何运行环境中正常使用。
globalThis 的用途
在前端中，我们经常需要在脚本中访问全局对象，例如设置全局变量或向全局函数中添加方法。在早期的 JavaScript 中，我们借助 window 或 global 来操作全局对象。
在 Node.js 中，全局对象 global 通常被用于定义全局变量和方法。但是在其他环境（例如浏览器 Web Worker）中，使用 global 会出现问题，因为全局对象不同。这时，我们只能使用 Window 对象并检查它是否存在。
现在，我们可以使用 globalThis 来获取全局对象，而且它可以在任何运行环境下使用。例如：
// 在浏览器中 console.log(globalThis === window); // true // 在 Node.js 中 console.log(globalThis === global); // true // 在 Web Worker 中 console.log(globalThis); // [object global]
除此之外，globalThis 还可以用于跨 iframe 或 worker 的通信。
示例代码如下：
// 在第一个 iframe 中创建一个变量 globalThis.sharedValue = 'Hello World!'; // 在第二个 iframe 中读取该变量 console.log(globalThis.sharedValue); // 'Hello World!'
这在 Web Worker 中同样适用：
// 在主脚本中创建一个新的 Worker
const worker = new Worker('worker.js');
// 在 worker.js 中访问全局对象
console.log(globalThis);globalThis 的注意事项
由于 globalThis 是 ECMAScript 2020 中的新功能，因此在一些较老的浏览器版本中可能不支持。为了避免兼容性问题，可以通过 polyfill 库来解决。
此外，在一些运行时中，例如一些处理 JavaScript 的工具，仍然可能没有实现 globalThis。在这种情况下，您可以使用简单的代码段 polyfill 手动实现。
// javascriptcn.com 代码示例
if (typeof globalThis === 'undefined') {
Object.defineProperty(
global,
'__GLOBAL_THIS__', {
value: this,
configurable: true,
enumerable: false,
writable: true,
}
);
globalThis = __GLOBAL_THIS__; // 函数中的 this 为全局上下文
delete global.__GLOBAL_THIS__; // 确保全局对象不会有变化
}在以上代码中，我们定义了一个新变量 __GLOBAL_THIS__，它的值为全局上下文。接着，我们将 globalThis 设置为 __GLOBAL_THIS__，以确保它引用正确的全局上下文。最后，我们删除 __GLOBAL_THIS__，以确保全局对象的引用不会有变化。
总结
ECMAScript 2020 推出了一个新的全局对象 globalThis，它提供了一种通用的方式来获取全局上下文中的 this 对象。globalThis 可以在任何运行环境下使用，极大地提高了 JavaScript 在跨环境处理时的可用性。
然而，由于它是 ECMAScript 2020 中的最新功能，需要注意它在一些旧的浏览器中可能不受支持，此时需要使用 polyfill 库进行兼容性处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65450ecf7d4982a6ebed3c70