ES12 中的 globalThis 对象和 window 对象的区别

ES12 中的 globalThis 对象和 window 对象的区别

在前端开发中，globalThis 对象和 window 对象都是非常重要的对象。但是，受不同的情况所限，它们各自具有不同的功能和优势。

globalThis 对象

globalThis 是 ES12 引入的一个全新的全局变量，并且它是真正的全局变量，即在任何上下文中都可以访问它。

ES11 及之前版本中，浏览器中全局对象是 window，在 Node.js 环境中是 global。这两个对象的属性和方法都只在特定的环境中可用，而 globalThis 解决了这个问题。

globalThis 可以跨越多种不同的 JavaScript 运行环境，包括网页浏览器、Node.js 等等。

请看以下示例代码，展示如何在浏览器和 Node.js 环境中访问 globalThis：

// 浏览器环境
console.log(globalThis);

// Node.js 环境
console.log(globalThis);

globalThis 对象的优势在于，通过它可以轻松地编写可重用的库和工具，而无需考虑它们将在哪种环境下运行。同时，它也解决了一些在某些环境下全局对象可能是 undefined 的问题。

window 对象

window 对象同样也是一个全局对象，但是它只在浏览器环境下存在。

window 对象包含了浏览器窗口的各种属性和方法，例如 location、history、navigator 等等。

以下是 window 对象的示例代码：

console.log(window.location.href); // 获取当前页面的 URL
console.log(window.innerWidth); // 获取窗口的宽度

window 对象可以访问 DOM 中的所有元素对象，同时也是许多 JavaScript 库和框架中常用的对象。

window 对象和 globalThis 对象的区别

尽管 window 对象和 globalThis 对象都是全局对象，它们之间存在着一些重要的区别：

• window 对象只能在浏览器环境下使用，而 globalThis 对象则可以在任何 JavaScript 运行环境下使用。

• window 对象包含了浏览器窗口的各种属性和方法，而 globalThis 对象则不包含这些属性和方法。

• window 对象是一个旧的全局变量，而 globalThis 对象则是一个更新的全局变量，更加符合现代的 JavaScript 编程习惯。

结论

globalThis 对象和 window 对象都是非常重要的全局变量，但是它们被设计用于不同的场景。

如果你的代码需要在多个 JavaScript 运行环境下运行，那么使用 globalThis 对象会更加明智；如果你的代码仅针对于浏览器环境，那么使用 window 对象更加合适。

综上所述，合理使用这两个全局变量，能够让前端开发工作更加顺畅，提高编程效率和代码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a7322d91dce0dc881c111