ES10 中的新特性：globalThis 的使用方法

ES10（也称为 ECMAScript2019）发布后，添加了一些有趣的新特性，其中 globalThis 肯定是其中之一。globalThis 提供了一种访问全局 this 对象的标准方法，并且可以在不同的环境中使用（比如浏览器和 Node.js）。本文将探讨 globalThis 的使用方法，并提供一些示例代码。

什么是 globalThis

在 JavaScript 中，我们经常需要访问全局的 this 地址。然而，这个全局对象的名称在不同的环境中是不一样的：在浏览器中，它是 window，而在 Node.js 中，它是 global。因此，一种跨平台的标准方法来访问全局 this 对象就变得比较重要了。这就是 globalThis 的作用: 允许我们在任何环境下访问全局 this 对象。

如何使用 globalThis

我们可以通过访问 globalThis 全局变量来获取全局 this 对象，如下所示：

console.log(globalThis);

这将输出全局的 this 对象（也称为顶层对象），其在浏览器中的名称为 window，在 Node.js 中的名称为 global，而在 Web Worker 中的名称为 self。具体取决于执行的运行环境。

下面是一个示例，当在浏览器和 Node.js 中运行时，输出结果分别为 window 和 global：

console.log(globalThis);

globalThis 在模块化代码中的应用

由于 globalThis 提供了一种跨平台的标准方法来访问全局 this 对象，因此它在模块化代码中非常有用。我们可以将需要访问全局 this 对象的代码封装到模块中，并使用 globalThis 在任何环境下访问它们。

例如，我们可能编写了一个示例模块，其中封装了一些代码来检测当前运行环境：

export function detectEnvironment() {
  if (typeof window !== "undefined") {
    return "browser";
  } else if (typeof global !== "undefined") {
    return "node";
  } else {
    return "unknown";
  }
}

然后，我们可以使用 globalThis 将此模块中的代码进行改进，以避免特定于平台的名称：

export function detectEnvironment() {
  if (typeof globalThis !== "undefined") {
    // 全局 this 对象可用
    if (globalThis.window) {
      return "browser";
    } else if (globalThis.global) {
      return "node";
    }
  }

  return "unknown";
}

这样，我们就可以在任何环境下使用这个模块了，而无需担心全局对象的名称。

总结

globalThis 是 ECMAScript 2019 中引入的一个新特性，该特性提供了跨平台访问全局 this 对象的标准方法。使用 globalThis，我们可以避免在不同的环境中写特定于平台的代码，并提高代码的可移植性。有了这个新特性，我们可以更加清晰地编写可重用的模块，让我们在各种 JavaScript 运行环境中编写更具通用性的代码。

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