在前端开发中,我们经常会遇到需要在不同的上下文中操作全局对象的情况,如在 Web Worker 或 iframe 中进行操作。然而,在不同的上下文中,全局对象的实际名称可能会有所不同,这就导致了一些烦恼,因为我们不能直接使用全局对象进行操作。这个问题在 ES11 中通过引入 globalThis 得到了解决。
globalThis 是什么?
globalThis 是一个新的全局对象,它在全局作用域中始终可用,无需任何前缀即可直接使用。它的作用就是提供一个标准的方式来访问全局对象,而不必依赖于不同上下文中的实际名称。这意味着无论在哪个上下文中,使用 globalThis 都能够访问到正确的全局对象。
如何使用 globalThis?
使用 globalThis 非常简单,只需要在全局作用域中使用即可:
// 在主文档中使用 console.log(globalThis); // 内置函数 Global // 在 Web Worker 中使用 console.log(globalThis); // WorkerGlobalScope // 在 iframe 中使用 console.log(globalThis); // Window
可以看到,在不同的上下文中,globalThis 都返回了正确的全局对象。这个特性允许我们在不同上下文中使用统一的全局对象,从而避免了因不同上下文中全局对象名称不同而导致的问题。
示例代码
下面给出一个使用 globalThis 的实例代码:
-- -------------------- ---- ------- -- ----------- --- --------- - ------ -------- -- - --- ------ ------- ---------------------------------- -- ----- ------ -- - ------ --------- -------------------- - --- -------- ----------------------- -- -- ------
我们可以在主文档中定义全局变量 globalVar,并在不同的上下文中使用 globalThis 进行读取和修改操作。此时,不必考虑不同上下文中全局对象名称的变化,因为 globalThis 总是返回正确的全局对象。
总结
ES11 中引入的 globalThis 解决了在不同上下文中操作全局对象时的问题。使用 globalThis,我们可以在不依赖于不同上下文中全局对象名称的前提下,统一地访问全局对象,从而编写出更加稳健的代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f807a1f6b2d6eab30319ae