随着前端技术的不断发展，ECMAScript 2021 引入了新的特性：全局对象 globalThis。本文将详细介绍 globalThis 的定义、用途和示例，以及其在前端开发中的指导意义。
globalThis 是什么？
在过去的 JavaScript 版本中，我们通常使用 window 或 self 来引用全局对象，但是在非浏览器环境下，这两个对象可能不存在。为了解决这个问题，ECMAScript 2021 引入了一个新的全局对象 globalThis。
globalThis 对应全局环境提供的默认对象，是许多 JS 环境中的顶层对象，包括浏览器、Node.js 以及 Web Worker。globalThis 对象的存在，使得使用全局对象成为了跨平台和跨环境的通用写法，对于前端应用的开发来说是相当方便的。
globalThis 的用途
在之前的实现中，我们需要在代码中单独判断环境，然后选择哪个全局对象进行操作。而现在，我们可以直接使用 globalThis 代替，使得代码更加清晰。比如，我们可以用以下代码获取当前的全局环境：
const global = typeof window !== 'undefined' ? window :
typeof global !== 'undefined' ? global :
typeof self !== 'undefined' ? self :
this;现在，我们可以省略上面的代码，使用 globalThis 对象：
const global = globalThis;
除了在获取全局对象时使用 globalThis，它还适用于 Web Worker 和浏览器中通过 iframe 加载的脚本，以及一些非标准场景中。
globalThis 的示例与指导意义
使用 globalThis 来获取全局对象提供了跨平台的通用写法，将不再依赖于具体的运行环境。以下是一些使用 globalThis 的示例：
// 在 Node.js 中使用 globalThis，获取全局环境下的console对象
globalThis.console.log('Hello world!');
// 在浏览器环境中使用 globalThis
globalThis.setTimeout(() => {
console.log('Hello world!');
}, 5000);在以前，我们必须使用具体的环境对象来获取全局变量。如下：
// javascriptcn.com 代码示例
// 在浏览器环境中
window.setTimeout(() => {
console.log('Hello world');
}, 5000);
// 在 Node.js 环境中
global.setTimeout(() => {
console.log('Hello world');
}, 5000);使用 globalThis 可以隐藏环境差异，提供一致性的编程体验。然而，在实际开发中，使用 globalThis 并不是最佳的方案。我们仍然应该根据不同的平台采用不同的方法，以定制化实现。
除此之外，使用 globalThis 也有一些注意事项。一些 ES5 版本的浏览器不支持 globalThis，因此在开发这些浏览器的 Web 应用时，要特别注意兼容性问题，选择适合的 polyfill 库来补充支持缺失的语法特性，保证代码的可用性。
总结
globalThis 的引入，为前端开发者提供了不依赖具体环境的跨平台编程体验，能够提高代码的可移植性和通用性。但我们仍需谨记在开发时，要根据实际情况采取不同方式的实现，以保证代码的可用性和体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f2a9c7d4982a6eb8b2a14