ECMAScript 2020 中新增的全局命名空间:globalThis

阅读时长 4 分钟读完

在 ECMAScript 2020 中,我们迎来了一个新的全局命名空间:globalThis。它解决了 JavaScript 中跨环境访问全局对象的问题,并且为跨平台和多环境开发提供了更好的支持。

globalThis 是什么?

在 JavaScript 中,全局对象是指在任意位置都可以访问的对象。在浏览器环境中,全局对象通常指 window 对象;在 Node.js 环境中,全局对象通常指 global 对象。

然而,在不同的环境中,全局对象的名称是不同的。在浏览器中,如果你写了一段代码并希望在 Web Worker 中运行,你需要访问 self 对象;如果你希望在 Node.js 中运行同一份代码,你需要访问 global 对象。

globalThis 提供了一种新的方式,使得我们可以在任何环境下访问全局对象,而不需要知道环境的具体细节。它会在运行时自动判断当前环境并返回相应的全局对象。

如何使用 globalThis?

globalThis 的使用非常简单,只需要在代码中直接引用它即可:

上述代码会在任何 JavaScript 环境中输出当前的全局对象。

但是,需要注意的是,globalThis 是一个新的全局变量,在早期的 JavaScript 引擎版本中可能并不支持。如果你需要在旧版本的浏览器或 Node.js 中使用 globalThis,需要手动添加一个 polyfill:

-- -------------------- ---- -------
-- ------- ---------- --- ------------ -
  -- ------- ------ --- ------------ -
    ---------- - -------
  - ---- -- ------- ------ --- ------------ -
    ---------- - -------
  - ---- -- ------- ---- --- ------------ -
    ---------- - -----
  -
-

这段代码会在 globalThis 不存在的情况下判断运行环境并为 globalThis 赋值。

globalThis 的指导意义

globalThis 的出现部分是为了解决在不同平台、不同环境下进行跨平台、跨环境的通用编程问题。在如今的互联网时代,越来越多的 JavaScript 应用程序需要在多个环境中运行,不同的环境中可能存在不同的全局对象,这样就给开发者带来极大的不便。

globalThis 的出现意味着,我们不再需要关注不同环境下全局对象的具体名称,而是可以通过使用 globalThis 获得当前环境下的全局对象,大大提高了通用 Web 开发的便捷性。

示例代码

示例 1 - 在浏览器和 Node.js 中输出全局对象

示例 2 - 在全局环境中设置变量

示例 3 - 在 Web Worker 中输出全局对象

示例 4 - 使用 polyfill 支持旧版浏览器和 Node.js

-- -------------------- ---- -------
-- ------- ---------- --- ------------ -
  -- ------- ------ --- ------------ -
    ---------- - -------
  - ---- -- ------- ------ --- ------------ -
    ---------- - -------
  - ---- -- ------- ---- --- ------------ -
    ---------- - -----
  -
-

结论

globalThis 的出现为跨平台和多环境开发提供了更好的支持。它可以让开发者在不同的 JavaScript 环境中编写具有通用性的代码,而不需要关注全局对象在不同环境下的名称。当然,在使用 globalThis 的时候,开发者也需要考虑一些兼容性问题。但是,globalThis 的出现仍然是一个非常好的进步,在日常的开发工作中它也肯定会为我们带来更多的便利。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/671b3f609babaf620faa4769

纠错
反馈