在 ES10 中，新增了一个全局变量 globalThis，它可以在任何地方访问并代表全局对象。这意味着在不同的环境下，可以通过 globalThis 访问全局对象，而不需要知道当前环境的全局对象是什么。本文将详细介绍 globalThis 的用法及其在前端开发中的应用。
globalThis 的用法
globalThis 是一个内置对象，它可以在任何地方访问并代表全局对象。在浏览器环境中，globalThis 可以表示 window 对象；在 Node.js 环境中，globalThis 可以表示 global 对象。这个全局对象是 JavaScript 中的最高级别对象，它包含了所有的全局变量和函数。
globalThis 可以在全局作用域中使用，也可以在函数内部使用。在全局作用域中使用 globalThis 相当于使用 window 或 global，但是在函数内部使用 globalThis 可以避免在不同环境下使用不同的全局对象。
下面是一个使用 globalThis 的示例：
function test() {
console.log(globalThis.Math.random());
}
test();在浏览器环境中，上述代码将输出一个随机数；在 Node.js 环境中，上述代码将抛出一个 ReferenceError，因为在 Node.js 中没有全局的 Math 对象。但是，如果将上述代码改为使用 globalThis，就可以在不同的环境中运行：
function test() {
console.log(globalThis.Math.random());
}
test();globalThis 在前端开发中的应用
globalThis 在前端开发中的应用非常广泛，它可以用于以下几个方面：
1. 跨环境通信
由于不同的环境有不同的全局对象，因此在不同的环境中进行通信时需要使用不同的方式。使用 globalThis 可以在不同的环境中使用相同的代码进行通信。
例如，在浏览器中，可以使用 postMessage 方法与其他窗口通信：
window.postMessage('hello', '*');在 Node.js 中，可以使用 process.send 方法与其他进程通信：
process.send('hello');使用 globalThis 可以统一这两种方式，使得在不同环境中使用相同的代码进行通信：
globalThis.postMessage('hello', '*');
globalThis.process.send('hello');2. 跨框架调用
在一个页面中可能会有多个框架，这些框架之间需要进行通信和调用。使用 globalThis 可以在不同的框架中使用相同的代码进行调用。
例如，在一个页面中有两个框架，一个是 id 为 frame1 的框架，另一个是 id 为 frame2 的框架。可以使用以下代码在这两个框架之间进行调用：
globalThis.frame1.postMessage('hello', '*');
globalThis.frame2.postMessage('hello', '*');3. 跨域请求
在前端开发中，经常需要进行跨域请求。使用 globalThis 可以在不同的域名下使用相同的代码进行请求。
例如，在一个页面中需要向另一个域名下的服务器发送请求，可以使用以下代码：
globalThis.fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data));总结
globalThis 是 ES10 中新增的一个全局变量，它可以在任何地方访问并代表全局对象。使用 globalThis 可以避免在不同环境下使用不同的全局对象，从而使得代码更加统一和可移植。在前端开发中，globalThis 可以用于跨环境通信、跨框架调用和跨域请求等方面，具有非常广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a3d08eb4cecbf2df6d8ad