在 ES6 中，我们已经可以通过 window 对象或者 this 关键字获取全局变量或方法，但是在 Node.js 中却无法直接获取全局变量，因为在 Node.js 中有一个全局变量 global，而浏览器中没有 global 全局变量，这给前端开发带来了一些不便。
在 ES12 中新增了全局单例对象 globalThis，用于在任何环境下获取全局变量。但是，由于目前各种环境的支持情况比较混乱，因此在使用 globalThis 的时候要注意兼容性问题。
globalThis 在各种环境下的使用情况
在各种环境下，globalThis 的实现方式是不同的。具体情况如下：
- 在浏览器中，
globalThis是window对象； - 在 Node.js 中，
globalThis是global对象； - 在 Web Workers 中，
globalThis是self对象； - 在 Service Workers 中，
globalThis是self对象； - 在 iframe 中，
globalThis是window对象。
因此，在不同的环境下使用 globalThis 要注意不同的使用方式。
使用 globalThis 的示例
我们可以使用以下示例代码来演示如何使用 globalThis：
-- ------ ---------------- - ------ ------- -- --------- ------------------------------ -- ------ ------ -------------------------- -- ------ ------ ------------------------ -- ------ ------ -- - ------- ----- ------------------------------ -- ------ ------ -------------------------- -- ------ ------ ------------------------ -- --------- -- - --- ------- ----- ------------------------------ -- ------ ------ ------------------------ -- ------ ------ ------------------------ -- --------- -- - ------- ------- ----- ------------------------------ -- ------ ------ ------------------------ -- ------ ------ ------------------------ -- --------- -- - ------ ----- ------------------------------ -- ------ ------ -------------------------- -- ------ ------ ------------------------ -- ------ ------
从示例中可以看出，在使用 globalThis 的时候，要根据不同的环境选择不同的全局变量对象来获取全局变量。
兼容性问题
目前，globalThis 已经被包含在了 ECMAScript 2020（ES12）的标准中，但是在一些老版本的浏览器或 Node.js 环境中可能并不支持。在这种情况下，我们可以使用以下代码来兼容：
-- ------- ---------- --- ------------ -
-- ------- ---- --- ------------ -
---------- - -----
- ---- -
--- -
---------- - ---------------- ---------
- ----- --- -
----- --- ------------- -- ---------- -------------
-
-
-通过这个代码片段，可以判断当前环境下是否支持 globalThis，如果不支持则通过 Function("return this")() 的方式获取全局变量对象。
总结
在使用 globalThis 的时候，需要注意浏览器、Node.js、Web Workers、Service Workers、iframe 等不同的环境下的使用方式。并且，在一些老版本的环境中可能不支持 globalThis，需要做好兼容性处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a37acb48841e9894fd2331