在 ECMAScript 2021 中，新增了一个全局对象 globalThis。这个对象可以在任何环境中获取到全局对象，不论是在浏览器环境下还是在 Node.js 环境下。本文将详细介绍 globalThis 对象的特点、应用场景和示例代码，帮助前端开发者更好地掌握这个新功能。
globalThis 的特点
在过去，获取全局对象需要使用不同的 API，比如 window 对象在浏览器环境下、global 对象在 Node.js 环境下。而在 ECMAScript 2021 中，无论是在浏览器环境还是在 Node.js 环境中，我们都可以使用 globalThis 对象来获取全局对象。这个对象的特点如下：
globalThis对象是全局性的，即无论是在哪个作用域中都可以访问到它。globalThis对象可以在所有 JavaScript 环境中访问到，包括浏览器和 Node.js 环境。globalThis对象提供了一个标准的 API 来访问全局对象，这样使得代码具有更好的兼容性。
globalThis 的应用场景
由于 globalThis 对象可以在所有 JavaScript 环境中访问到全局对象，因此在一些特定的场景下，我们可以使用 globalThis 来使得代码更加通用。以下是 globalThis 的一些应用场景：
- 使用
globalThis替代window和global对象，使得代码具有更好的兼容性。 - 在跨域的情况下，使用
globalThis来访问父窗口或子窗口的全局对象。 - 使用
globalThis来在不同的 JavaScript 环境中传递数据。
globalThis 在实际代码中的使用
以下是一些实际代码示例，演示了 globalThis 对象在不同场景下的使用。
示例 1：如何在浏览器和 Node.js 环境中获取全局对象
// 在浏览器环境中 console.log(globalThis === window); // 在 Node.js 环境中 console.log(globalThis === global);
示例 2：如何在不同的 JavaScript 环境中传递数据
// 在子窗口中，将数据传递给父窗口
globalThis.parent.postMessage('Hello, Parent!');
// 在父窗口中，接收子窗口传递的数据
window.addEventListener('message', event => {
console.log(event.data);
});示例 3：如何使用 globalThis 来兼容不同 JavaScript 环境
// 使用 globalThis 和 ES2020 的 globalThis Polyfill 来兼容不同 JavaScript 环境
const globalObject = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
console.log(globalObject === globalThis);总结
globalThis 对象是 ECMAScript 2021 中新增的全局对象，它可以在任何 JavaScript 环境中获取全局对象，具有更好的兼容性和通用性。在一些特定的场景下，使用 globalThis 可以使得代码更加通用、简洁、易读。希望本文对前端开发者对 globalThis 对象的理解和使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbe337f6b2d6eab31f809b