ES12 中的 globalThis: 解决跨平台对象调用问题的解决方案-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域中，有时候需要在不同平台之间进行对象调用，但由于不同平台对于全局变量的实现方式不同，可能会导致对象无法正确调用。为了解决这个问题，ES12 新增了一个全局对象 globalThis。

globalThis 的作用

globalThis 是一个全局对象，它的作用是创建一个能够在所有平台上都能正确使用的全局变量。有了 globalThis，我们就可以统一使用该对象的属性，而不必再担心对象无法在不同平台上正确调用的问题。

globalThis 的使用方法

globalThis 可以在各种环境中使用，无论你是在浏览器、Node.js 还是 Web Worker 中编写代码，都可以使用 globalThis。

使用 globalThis 的方法非常简单，只需要在需要使用全局变量的地方，将对象属性前缀改为 globalThis 即可，具体如下所示：

// ES11 之前
console.log(window.location.href); // 浏览器环境下的全局变量

// ES12 引入 globalThis 后
console.log(globalThis.location.href); // 所有平台上的全局变量

globalThis 的兼容性问题

由于 globalThis 是 ES12 新增的特性，因此在一些之前的环境中并不支持该对象。为了解决这个问题，我们可以使用一些兼容性处理方式来确保代码能够在不同平台上运行。

1、使用 polyfill

为了让旧平台的代码也能使用 globalThis，我们可以使用 polyfill 来模拟该对象，具体代码如下所示：

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

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

2、使用 window、global 和 self

在没有 globalThis 对象的情况下，我们可以使用其他方式来获取全局变量。

在浏览器环境下，我们可以使用 window 对象；在 Node.js 环境下，我们可以使用 global 对象；在 Web Worker 环境下，我们可以使用 self 对象。

具体代码如下所示：

// 在浏览器中
console.log(window.location.href);

// 在 Node.js 中
console.log(global.process);

// 在 Web Worker 中
console.log(self);

结论

如果你需要在前端开发中进行跨平台对象调用，建议使用 ES12 中新增的 globalThis 对象来解决问题。在使用该对象时，需要注意其兼容性问题，可以使用 polyfill 或其他方式来确保代码能够在不同平台上正确运行。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66fb995844713626015f4151