ES12 中引入的 globalThis，你想要吗？

在 Web 开发领域中，JavaScript 是最为常用和流行的语言之一。而随着 JavaScript 的发展，新的语言版本与标准也层出不穷。在 ES12（也称 ECMAScript 2021）中，引入了一个新的全局对象：globalThis。在这篇文章中，我们将深入探讨 globalThis 对前端开发的意义，以及如何在项目中使用它。

什么是 globalThis？

每个 JavaScript 环境都有一个全局对象。在浏览器中，全局对象是 window；在 Node.js 中，全局对象是 global。然而，不同的环境使用不同的全局对象，这给开发者带来了一些困扰。例如，如果同时编写浏览器和服务器端的代码，需要针对不同的全局对象写不同的代码，这会带来很多麻烦。这就是 ES12 中引入 globalThis 的原因。

globalThis 是一个全局对象，可以在任何 JavaScript 环境中使用。无论在浏览器中还是在 Node.js 中，都可以使用 globalThis 访问全局对象。这使得我们可以在任何环境中编写通用的代码，而不必担心环境差异。

如何使用 globalThis？

使用 globalThis 非常简单。与其他全局对象（如 window 和 global）一样，可以直接通过名称访问 globalThis 中的属性和方法。例如，可以使用 globalThis.setTimeout 在任何环境中设置一个延时调用：

globalThis.setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

在这个例子中，我们使用 globalThis.setTimeout 而不是 window.setTimeout 或 global.setTimeout，这使得我们的代码更具通用性。

在一些新的 API 中，也可以使用 globalThis 来访问全局对象。例如，ES12 中添加了一个新的原语类型 globalThis.QueueMicrotask()，用于在任务队列中添加微任务。这与 window.queueMicrotask() 和 global.queueMicrotask() 类似，但更加通用。

globalThis 的优点

globalThis 的引入对前端开发有很多好处。以下是一些主要的优点：

通用性

使用 globalThis 可以编写更加通用的代码。在不同的 JavaScript 环境中，不必担心全局对象差异的问题。这使得跨平台开发变得更加容易。

可读性

通过使用 globalThis，可以更加清晰地表达全局对象的含义。这有助于避免混淆和错误。

安全性

使用 globalThis 可以提高代码的安全性。通过消除全局对象的差异，可以避免被攻击者利用环境差异进行攻击。

总结

在这篇文章中，我们深入探讨了 ES12 中引入的 globalThis，以及它对前端开发的意义。通过使用 globalThis，可以编写更加通用、可读、安全的代码，避免了环境差异带来的一些问题。现在我们可以在任何 JavaScript 环境中使用 globalThis 访问全局对象了，这让我们的开发变得更加容易和优雅。

如果你有兴趣了解更多 ES12 的特性，请查看 ECMAScript® 2021 Language Specification。

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