ES2020 的 Globalthis 及使用方法

在最近发布的 ECMAScript 2020（ES2020）规范中，新增了一个非常重要的全局对象 Globalthis。它在一定程度上解决了在不同环境下全局对象的不一致性问题，同时也为开发者们带来了更加便捷的编码方式。

什么是 Globalthis？

Globalthis 是一个新增的全局对象，它代表了各种不同环境下的全局对象。这样，开发者们不需要再在程序中确认当前代码的运行环境，也不需要一遍遍地避免在不同环境下使用不同的全局对象。

在老版本的规范中，开发者们需要针对浏览器和 Node.js 等常见环境使用不同的全局对象，例如：window 和 global 等。在代码中处理这种不一致性问题，往往会显得非常麻烦。而使用 Globalthis，开发者们可以将这个问题留给运行时系统去处理，从而提高了开发效率。

如何使用 Globalthis？

Globalthis 是如此重要，以至于它的主要使用方法已经包含在了 JavaScript 标准库中，并且还支持手动降级，以此兼容老版本的规范。

使用方法

如果你在浏览器或者 Node.js 等环境下使用 ES2020 规范，那么 Globalthis 就会自动存在，你可以直接使用：

if (typeof GlobalThis === "undefined") {
  console.log("GlobalThis is not supported.")
} else {
  console.log(GlobalThis);
}

同样的，你也可以手动降级，以此兼容不支持 Globalthis 的环境：

// javascriptcn.com 代码示例
if (typeof globalThis === "undefined") {
  if (typeof window !== "undefined") {
    globalThis = window;
  } else if (typeof self !== "undefined") {
    globalThis = self;
  } else {
    throw new Error("Unable to locate global object.");
  }
}

示例代码

下面是一个简单的示例，展示如何在不同环境下使用 Globalthis。

在浏览器中：

<script>
  console.log(GlobalThis === window);
  console.log(GlobalThis === self);
</script>

在 Node.js 中：

const { GlobalThis } = require('es-abstract');
console.log(GlobalThis === global);

总结

ES2020 的 Globalthis 为开发者们带来了更加便捷的编码方式，通过使用 Globalthis，你可以将全局对象的不一致性问题留给运行时系统去处理，从而提高了开发效率。

本文讲述了 Globalthis 的定义、使用方法以及示例代码，并且介绍了手动降级的方法，以此兼容老版本的规范。相信这些内容对于前端开发者们都很有指导意义。

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