随着前端技术的不断发展，我们在开发过程中越来越依赖于多种平台和环境。然而，由于不同的平台可能存在不同的全局对象，导致跨平台的代码在不同环境下运行时会出现一些问题。ES2020引入了全局对象 globalThis，为我们提供了一种解决方案，能够让我们在不同的平台和环境下更好地实现跨平台性。
什么是 globalThis？
全局对象是 JavaScript 程序的作用域链的顶端，任何未声明的变量都会被当做全局对象的属性。但问题是，不同的环境下，全局对象可能会不同。比如在浏览器环境下，全局对象是 window；而在 Node.js 环境中，全局对象是 global。
ES2020 引入了一个新的全局变量 globalThis。这个变量始终指向全局环境的顶级对象，无论当前环境是哪个平台。在浏览器，Node.js，Web Workers，Service Workers 以及 Electron 等平台中都可以使用。
globalThis 的优点
使用 globalThis 有以下优点：
统一的全局对象
使用 globalThis 可以解决不同的平台和环境使用不同的全局对象的问题。这样可以使我们的代码更加统一，更易于在不同的环境下迁移和维护。
安全
在 Web 环境中，一些通用变量 (如 window，self，parent) 可能被重定义，并被用于攻击 web 应用程序。使用 globalThis 可以避免这个问题，因为它是只读的。
明确性
使用 globalThis 可以让我们的代码更清晰明了，因为它能够明确地表示当前环境下的全局对象。
globalThis 的使用
globalThis 可以在任何环境中统一使用，常见的用法有以下几种：
全局变量
使用 globalThis 可以定义一个全局变量，同时在不同的环境下都可以使用。
globalThis.count = 1; console.log(globalThis.count); // 1
异步操纵全局变量
使用 Worker API 的时候，我们可以通过 postMessage() 方法向 worker 发送消息。此时，我们需要让 worker 知道全局变量的存在。
// index.js
const worker = new Worker('worker.js');
worker.postMessage('hello');
// worker.js
onmessage = event => {
console.log(globalThis.innerWidth);
};在上面的代码中，我们要获取当前窗口的宽度，因此需要使用 globalThis.innerWidth。
动态导入模块
使用动态导入模块的时候，我们需要使用 import() 函数返回一个新的 Promise。此时，我们可以使用 globalThis 传递一些全局变量。
const modulePath = './module.js'; const promise = import(modulePath); (globalThis as any).importPromise = promise;
在上面的代码中，我们定义了一个全局变量 importPromise，它可以让我们在异步加载模块的时候使用。
浏览器与 Node.js 端通信
使用 Web Worker 和 Service Worker 的时候，我们需要使用 postMessage() 方法和消息事件监听器 listener 获取在其他线程中设置的全局变量。
-- -------------------- ---- ------- -- -------- ----- ------ - --- -------------------- ---------------------------- -- --------- --------- - ----- -- - ----- ----------- - ------ ----------------- --- ------------ ------------------------- --
在上面的代码中，我们根据 globalThis 判断当前是否在浏览器环境中。
总结
全局对象是 JavaScript 程序的作用域链的顶端，但在不同的环境下，全局对象可能会不同，导致跨平台的代码在不同环境下运行问题。ES2020 引入了全局对象 globalThis，它始终指向全局环境的顶级对象，无论当前环境是哪个平台。使用 globalThis 可以让我们的代码更加统一，更易于在不同的环境下迁移和维护，同时还可以提高代码的可读性和安全性。
希望本文能够帮助大家了解 globalThis 的使用和优势，并在实际应用中得到更好的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ddbba968c7c53b08ab980