在前端开发中，我们经常需要与浏览器窗口进行交互。为了实现这种交互，我们通常会使用 JavaScript 中的 window 对象，这是一个全局对象，提供了大量的浏览器 API。
但是，在 ES12 标准中，我们发现了一些新的全局对象，例如 globalThis 和 self。这些对象与 window 有什么区别呢？本文将介绍 ES12 中的这些全局对象，并且探讨它们之间的区别。
globalThis
globalThis 是 ES12 标准中新出现的一个全局对象，它被设计成一个可以在任何 JavaScript 环境中获取的全局对象，包括浏览器、Node.js 和 Web Worker。这意味着，不管你的 JavaScript 代码在哪个环境中运行，你都可以通过 globalThis 来访问全局对象。
从标准库的角度来看，globalThis 的作用类似于 window，因为它提供了许多浏览器 API。不同之处在于，window 只在浏览器环境中可用，而 globalThis 可以在浏览器和其他 JavaScript 环境中使用。
下面是一个示例代码，演示了如何使用 globalThis 来访问全局对象：
console.log(globalThis); // 浏览器环境下输出 window，Node.js 环境下输出 global
self
self 也是 ES12 标准中新增的一个全局对象，它是一个只读属性，指向当前执行的 WorkerGlobalScope，在非 Worker 环境下等价于 window。如果你不熟悉 Web Worker，可以简单理解为一个运行在后台线程中的 JavaScript 程序。
在浏览器中，如果从主程序中使用 self，它将返回 window 对象。如果从 Worker 中使用 self，它将返回当前的 WorkerGlobalScope 对象。
下面是一个示例代码，演示了如何在 Worker 中使用 self 访问全局对象：
self.addEventListener('message', function(event) {
console.log(self); // 在 Worker 中，self 指向 WorkerGlobalScope
});window
window 通常是我们在前端开发中最常用的全局对象之一，因为它在浏览器环境中提供了大量的浏览器 API，例如 document、location 和 history 等。
从本质上讲，window 是 DOM 的根对象，是通过浏览器运行 JavaScript 代码时创建的。在浏览器环境中，window 包含了所有全局变量、函数和对象。这意味着，通过 window，我们可以访问到所有浏览器 API。
下面是一个示例代码，演示了如何在浏览器环境中使用 window 访问全局对象：
console.log(window); // 输出 window 对象
区别与应用
上面介绍了三个不同的全局对象：globalThis、self 和 window。它们之间的关系和区别如下：
globalThis：是一个可用于访问全局对象的标准库，可以跨浏览器和 Node.js 进行使用。
self：是一个只读属性，指向当前执行的 WorkerGlobalScope，在非 Worker 环境下等价于 window。
window：是浏览器环境中最常见的全局对象，提供了大量的浏览器 API。
在实际应用中，我们应该根据不同的场景选择不同的全局对象。如果在多个 JavaScript 环境中交互，可以使用 globalThis 来访问全局对象。如果需要与 Web Worker 进行交互，可以使用 self 来访问全局对象。而在浏览器环境中，我们通常会使用 window 来访问浏览器 API。
结论
ES12 中的 globalThis、self 和 window 三个全局对象都有着自己的作用和功能，应该在不同的场景中加以使用。
globalThis 是一个可用于访问全局对象的标准库，在任何 JavaScript 环境中都可以使用。
self 是一个只读属性，指向当前执行的 WorkerGlobalScope，在非 Worker 环境下等价于 window。
window 是浏览器环境中最常见的全局对象，提供了大量的浏览器 API。
通过深入了解这些全局对象，我们可以更好地理解 JavaScript 运行时的概念和机制，并且可以更好地选择适当的工具来实现我们的开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736e3ad0bc820c58256f190