随着 JavaScript 的不断发展，ES2020 中引入的 globalThis 关键字成为了一个备受关注的新特性。我们在此文章中将介绍 globalThis 的具体用法，并与旧版本中的 this 进行比较。同时，我们还将向您展示如何使用 globalThis 来提升代码质量和可读性。
什么是 globalThis？
简单来说， globalThis 是一个可以访问全局上下文的变量，它的作用与 window 和 self 相同，可以在浏览器和 Node.js 中使用。当我们在浏览器中使用 this 时，它通常指向 window 对象。而在 Node.js 环境中，this 指向的是一个空对象。
在旧版本 ES 中，为了兼容浏览器和 Node.js 等不同的环境，我们必须要手动设置 this 的指向。这样会导致代码的可读性和可维护性变得更差。而现在，我们可以使用 globalThis 来解决这个问题。
globalThis 的优势
- 弥合了不同 JavaScript 环境下的差异，便于代码的移植和维护；
- 使代码更加可读和清晰，尤其在给全局对象属性进行赋值的时候；
- 使代码更加健壮，避免了一些不必要的错误和类型转换的问题。
使用 globalThis 进行对象赋值
我们来看一个例子，通过 globalThis 来给全局对象 window 或 global 创建新的属性。在旧版本 ES 中，我们必须要判断当前环境并手动设置 this 的指向。
if (typeof window !== 'undefined') {
window.foo = 'bar';
} else if (typeof global !== 'undefined') {
global.foo = 'bar';
}现在，我们可以使用 globalThis 来简化代码：
globalThis.foo = 'bar';
具体示例
下面是一些具体的示例，使用 globalThis 来判断不同环境下的全局对象，并创建一个新的属性。
// 在浏览器或 Web Worker 中 const globalObj = typeof window !== 'undefined' ? window : self; globalObj.foo = 'bar'; // 正常执行 // 在 Node.js 环境中 global.foo = 'bar'; // 抛出 ReferenceError，因为 "window" 未定义
现在，我们可以使用 globalThis 来消除条件语句并使代码更加清晰和易读：
globalThis.foo = 'bar'; // 可以在任何 JavaScript 环境中正常执行
总结
globalThis 是一个很有用的新特性，它可以使 JavaScript 的全局对象更加易于调用和维护。通过使用 globalThis，我们可以消除繁琐的条件语句，避免类型转换等一些不必要的问题。最后，我希望这篇文章能够帮助您更好地理解 globalThis，并提高您在实际开发中的代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f39b8ff6b2d6eab3cf30d9