随着 Web 技术的不断发展，越来越多的语言特性被引入到 JavaScript 中。ES11 引入了全局对象 globalThis，这是一项非常有用的新特性，可以帮助我们更好地掌握 JavaScript 中全局命名空间与跨域通信的问题。
globalThis 概述
在现代 JavaScript 代码中，我们经常需要在不同的作用域中访问全局对象，以获取或设置全局变量或函数。在浏览器环境中，全局对象通常是 window 对象，而在 Node.js 环境中则是 global 对象。
使用全局对象时，我们需要判断当前运行环境是浏览器还是 Node.js，然后决定使用哪个全局对象。这种做法十分不方便，因为它需要我们手动判断运行环境，并且容易写出不兼容的代码。
ES11 引入的全局对象 globalThis 能够解决这个问题，它提供了一个标准的、不依赖于运行环境的全局命名空间，可以用于在任何地方访问全局对象。
globalThis 与旧版本的使用区别
在旧版本的 JavaScript 中，为了获得全局对象，我们通常使用如下方法：
// Browser const global = window; // Node.js const global = global;
而使用 globalThis 后，我们可以在任何环境下使用 globalThis 访问到全局对象。
const global = globalThis;
这样做的好处在于我们不用关心代码运行在哪个环境中，只需要使用 globalThis 就能够获得全局对象，同时让代码具有更好的可读性与可维护性。
globalThis 用途
跨域通信
跨域通信是 Web 开发中一个非常常见的问题。由于浏览器的同源策略，我们无法在不同域名的网页之间直接进行通信。为了解决这个问题，我们需要使用特殊的技术，如 JSONP、CORS 或 iframe。而 globalThis 则可以方便地在不同域名的网页之间进行通信。
// website A
globalThis.sharedObject = {name: 'test name'};
// website B
// 在跨域通信中，可以使用 postMessage 方法
window.addEventListener('message', (event) => {
console.log(event.data);
});函数注入
函数注入是一种更加简洁的编程风格，可以让我们更好地重用代码。借助于全局对象，我们可以将一个通用的函数“注入”到全局命名空间中，让其他代码可以随时调用。
globalThis.sayHello = function(name) {
console.log(`Hello, ${name}!`);
};
// 调用
sayHello('Alice');组件开发
在组件开发中，我们通常需要使用全局对象来获取一些全局状态，如窗口尺寸、用户语言等等。使用 globalThis 可以让我们更加方便地进行组件封装与重用。
class MyComponent {
constructor() {
this.language = globalThis.navigator.language;
this.windowWidth = globalThis.innerWidth;
}
}结论
全局对象 globalThis 是 JavaScript 中非常有用的新特性，它可以让我们更好地掌握 JavaScript 中全局命名空间与跨域通信的问题。相比于旧版的 JavaScript，globalThis 可以让代码具有更好的可读性与可维护性，并且方便进行组件封装与重用、函数注入等等。
我们可以在任何地方使用 globalThis 来访问全局对象，而不需要关心代码运行在哪个环境中。在实际开发中，我们应该使用 globalThis 来提升代码质量与编程效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67398266317fbffedf1721ab