ES11 中的 `globalThis`:取代 `window`、`self`、`global`的全局对象

阅读时长 3 分钟读完

在前端开发中,全局对象是一个非常重要的概念。早期,JavaScript 中定义的全局对象是 window,它只存在于浏览器环境中。但为了能够在其他环境下使用 JavaScript,比如服务端 Node.js,需要定义另一个全局对象 global

为了统一不同环境下的全局对象,ECMAScript 2020(即 ES11)增加了一个新的全局对象:globalThis。本文将详细介绍 globalThis 的特性、用法以及一些示例代码。

globalThis 的特性

globalThis 是一个全局对象,但它的定义不同于浏览器环境下的 window 或 Node.js 环境下的 global。它可以在所有的 JavaScript 环境中访问,无需考虑当前环境是什么。下面是一些 globalThis 的特性:

  1. globalThis 是一个变量,不是一个属性,所以可以直接使用,无需引用其它对象。
  2. globalThis 是只读的,无法重写或删除。
  3. globalThis 包含了所有全局变量和函数。
  4. 无论在什么上下文中执行代码(比如在 iframe 中),globalThis 都会返回相同的对象。

使用 globalThis

在很多情况下,使用 globalThis 可以使代码更加清晰和跨平台。下面是一些使用 globalThis 的示例代码。

在环境中查找 Promise 对象

使用 globalThis 可以动态地查找全局对象中的 Promise 对象,在不同的 JavaScript 环境中使用相同的代码。

获取顶级对象

在分析不同的 JavaScript 代码库时,可能存在一些固有的全局对象。例如,在浏览器环境中,我们通常使用 window 对象作为顶级对象。但是,一些广告拦截插件可能会更改应用程序的上下文,使 window 对象无法正常使用。使用 globalThis 可以在不同的上下文中获取正确的顶级对象。

总结

globalThis 是一个新的全局对象,用于将不同的 JavaScript 环境统一。使用 globalThis 可以动态地查找全局对象中的对象,而无需考虑当前环境是什么。尽可能使用 globalThis 可以让代码更加清晰和跨平台。

最后,提供一个简单的 Polyfill 实现以供参考。

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

希望本文能够帮助你更好地理解 globalThis 的概念和使用。

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

纠错
反馈