在前端开发中,全局对象是一个非常重要的概念。早期,JavaScript 中定义的全局对象是 window
,它只存在于浏览器环境中。但为了能够在其他环境下使用 JavaScript,比如服务端 Node.js,需要定义另一个全局对象 global
。
为了统一不同环境下的全局对象,ECMAScript 2020(即 ES11)增加了一个新的全局对象:globalThis
。本文将详细介绍 globalThis
的特性、用法以及一些示例代码。
globalThis
的特性
globalThis
是一个全局对象,但它的定义不同于浏览器环境下的 window
或 Node.js 环境下的 global
。它可以在所有的 JavaScript 环境中访问,无需考虑当前环境是什么。下面是一些 globalThis
的特性:
globalThis
是一个变量,不是一个属性,所以可以直接使用,无需引用其它对象。globalThis
是只读的,无法重写或删除。globalThis
包含了所有全局变量和函数。- 无论在什么上下文中执行代码(比如在 iframe 中),
globalThis
都会返回相同的对象。
console.log(globalThis); // 在所有 JavaScript 环境下都可用,返回对应的全局对象
使用 globalThis
在很多情况下,使用 globalThis
可以使代码更加清晰和跨平台。下面是一些使用 globalThis
的示例代码。
在环境中查找 Promise 对象
使用 globalThis
可以动态地查找全局对象中的 Promise 对象,在不同的 JavaScript 环境中使用相同的代码。
const Promise = globalThis.Promise;
获取顶级对象
在分析不同的 JavaScript 代码库时,可能存在一些固有的全局对象。例如,在浏览器环境中,我们通常使用 window
对象作为顶级对象。但是,一些广告拦截插件可能会更改应用程序的上下文,使 window
对象无法正常使用。使用 globalThis
可以在不同的上下文中获取正确的顶级对象。
const _global = typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {};
总结
globalThis
是一个新的全局对象,用于将不同的 JavaScript 环境统一。使用 globalThis
可以动态地查找全局对象中的对象,而无需考虑当前环境是什么。尽可能使用 globalThis
可以让代码更加清晰和跨平台。
const MY_GLOBAL = globalThis.MY_GLOBAL || {};
最后,提供一个简单的 Polyfill 实现以供参考。
-- -------------------- ---- ------- -- ------- ---------- --- ------------ - --------------------------------------- ------------ - ---- ---------- - ------ ----- -- ------------- ---- --- -------------------- - ---------- ------ --------------------------- -
希望本文能够帮助你更好地理解 globalThis
的概念和使用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6500edba95b1f8cacded2f6e