什么是 globalThis?
在以前的 JavaScript 版本中,浏览器和 Node.js 有两种不同的方式来访问全局对象:在浏览器中使用 window
,在 Node.js 中使用 global
。但是随着 ECMAScript 2021 (ES12) 的发布,JavaScript 引入了一个新的统一的方式来访问全局对象:globalThis
。
globalThis
是一个特殊属性,它引用了全局对象,在不同的执行上下文中都能正常工作。不同于 window
和 global
,它可以同时在浏览器和 Node.js 中使用。
如何使用 globalThis?
访问全局对象在许多场景下都是必需的,比如获取全局环境的时间、浏览器中的 Cookies、Node.js 中的全局变量等等。使用 globalThis
就可以避免不同的环境使用不同的方法来访问全局对象。
在任何情况下,只要使用 globalThis
就能够访问到全局对象。下面是一个简单的示例代码:
if (typeof globalThis.setTimeout === 'function') { globalThis.setTimeout(() => { console.log("Hello, world!"); }, 1000); } else { console.log("globalThis not available"); }
globalThis 的应用场景
跨平台代码
在编写跨平台的代码时,使用 globalThis
可以避免因为不同的平台使用不同的方式来访问全局对象所带来的问题。例如,下面的代码可以在浏览器和 Node.js 中都能执行,并访问到全局对象:
var myGlobalObject = function() { if (typeof globalThis === "object") return globalThis; if (typeof window === "object") return window; if (typeof self === "object") return self; throw new Error("Unable to locate global object"); }();
转移控制权
使用 globalThis
可以方便地在闭包或异步任务中更改全局对象。例如:
-- -------------------- ---- ------- -- --- ------ ----- ----- -------- - --- -------------------- -------------------- - ---------------------------------------- -- --------- ----- ---------- - --------------------------------------------------------- -- ---------------------- -- ------- ----- -------- - -----------------------
polyfill
在某些情况下,使用 globalThis
可以使 polyfill 更加简洁和简单。例如:
// polyfill if (globalThis.setImmediate === undefined) { globalThis.setImmediate = function(fn) { return setTimeout(fn, 0); }; }
结论
globalThis
是 ECMAScript 2021 (ES12) 中的一个重要新特性,它提供了一种全新的方式来访问全局对象,避免了在不同的环境中使用不同的方式的弊端。对于编写跨平台代码、转移控制权和编写 polyfill 等场景,使用 globalThis
都可以带来更好的代码可读性和可维护性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/672db517eedcc8a97c85b378