ES11 (2020) 中的 globalThis:如何解决 web 工作器和 iframe 中的全局对象问题?

阅读时长 2 分钟读完

在前端开发中,我们经常会遇到需要在不同的上下文中操作全局对象的情况,如在 Web Worker 或 iframe 中进行操作。然而,在不同的上下文中,全局对象的实际名称可能会有所不同,这就导致了一些烦恼,因为我们不能直接使用全局对象进行操作。这个问题在 ES11 中通过引入 globalThis 得到了解决。

globalThis 是什么?

globalThis 是一个新的全局对象,它在全局作用域中始终可用,无需任何前缀即可直接使用。它的作用就是提供一个标准的方式来访问全局对象,而不必依赖于不同上下文中的实际名称。这意味着无论在哪个上下文中,使用 globalThis 都能够访问到正确的全局对象。

如何使用 globalThis?

使用 globalThis 非常简单,只需要在全局作用域中使用即可:

可以看到,在不同的上下文中,globalThis 都返回了正确的全局对象。这个特性允许我们在不同上下文中使用统一的全局对象,从而避免了因不同上下文中全局对象名称不同而导致的问题。

示例代码

下面给出一个使用 globalThis 的实例代码:

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

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

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

我们可以在主文档中定义全局变量 globalVar,并在不同的上下文中使用 globalThis 进行读取和修改操作。此时,不必考虑不同上下文中全局对象名称的变化,因为 globalThis 总是返回正确的全局对象。

总结

ES11 中引入的 globalThis 解决了在不同上下文中操作全局对象时的问题。使用 globalThis,我们可以在不依赖于不同上下文中全局对象名称的前提下,统一地访问全局对象,从而编写出更加稳健的代码。

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

纠错
反馈