ES12 提供了一个全局对象 globalThis，它可以让开发者在任何环境中都能够找到全局对象，而不用关注运行时环境的差异。但是，这个新的全局对象在旧的浏览器中并不支持，导致了兼容性问题。本文将详细介绍 globalThis 的作用和用法，并提供几种解决方式以兼容旧的浏览器环境。
globalThis 是什么？
在以前的 JavaScript 标准中，全局对象有两种形式：window（浏览器环境）和global（Node.js 环境）。然而，这种全局对象的差异导致了一些问题，比如在不同环境下要针对不同的全局对象编写代码。ES12 中引入的 globalThis 目的就是解决这个问题，它表示在任何执行上下文中都存在的全局对象，而不管是在浏览器环境还是 Node.js 环境。
globalThis 是一个只读的全局变量，不能被覆盖。它可以通过以下几种方式进行获取：
-- -------------------- ---- ------- -- -------- --- --------------- - ------- --- --------------- - ----- --- --------------- - ------- --- --------------- - ---- --- --------------- - ------- -- - ------- ---- --- --------------- - ------- -- ------- --- --------------- - -----------
具体来说，globalThis 解决了以下几个问题：
- 全局对象的名称在不同环境中不同，导致了代码的兼容性问题；
- 在 Web Workers 中，全局对象是 WorkerGlobalScope，而不是 window 或 global，这也会导致一些问题；
- 在某些情况下，我们需要一个通用的全局对象，这时候 globalThis 就显得非常合适。
globalThis 的兼容性问题
尽管 globalThis 很有用，但是它在旧的浏览器中并不支持。根据 caniuse.com 的数据，只有 Chrome（84）、Firefox（79）和 Safari（14）开始支持 globalThis。对于旧版的浏览器，要使用 globalThis 就会出现 ReferenceError 的错误。
解决 globalThis 的兼容性问题，可以使用以下几种方式：
将 globalThis 赋值给 window
// 兼容性处理：在浏览器中，将 globalThis 赋值为 window
if (typeof window !== "undefined") {
window.globalThis = window;
}这种方式最简单，直接将 globalThis 赋值为 window。这样，在浏览器中就可以使用 globalThis，而且不会影响其他代码。
使用 polyfill
如果不想在代码中修改全局对象，可以使用 polyfill。下面是一个 polyfill 的例子：
-- -------------------- ---- -------
--------- -- -
-- ------- --------------- --------
-- ------- ---------- --- --------- -
-------
-
-- ------------
--- --------- - -------- -- -
-- -----
-- ------- ------ --- ------------ -
------ -------
-
-- - ------- -
-- ------- ------ --- ------------ -
------ -------
-
-- - ------ -
-- ------- ---- --- ------------ -
------ -----
-
-- -----------
----- --- ------------- ---- ------ ---------
--
-- ---------- ----------
--- --------------- - ------------
-------------------------- - ----------------
-----使用这个 polyfill，可以在旧的浏览器中使用 globalThis。这个 polyfill 会检测全局对象是否已经有了 globalThis，如果已经有了，则跳过 polyfill。
使用库
除了手动实现 polyfill，也可以使用现成的库，比如 es-shims/globalThis。这个库提供了一个符合规范的 globalThis 实现，可以在旧的浏览器中使用。
安装命令：
npm install globalthis
使用方式：
import "globalthis/auto"; console.log(globalThis); // 全局对象
总结
globalThis 是一个非常有用的新特性，它可以让我们在不同的环境中都可以访问全局对象，减少了因为全局对象的名称不同而导致的问题。然而，它在旧的浏览器中并不支持，需要进行兼容性处理。本文提供了几种解决方案，让我们可以在旧的浏览器中安全地使用 globalThis。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a91e1c48841e9894569662