ES11 引入的 globalThis 对象是什么？有什么用处？

在 ES11 中引入了一个全新的对象——globalThis。它是一个全局属性，指向全局的 this 值。在浏览器中，globalThis 指向 window 对象；在 node.js 中，globalThis 指向 global 对象。因此，使用 globalThis 可以避免在不同的环境中使用不同的全局变量。

为什么需要 globalThis 对象？

在 web 开发中，经常需要使用全局变量来存储一些数据，这样可以在不同的函数中共享这些数据。但在不同的环境中，全局变量的名称却不同。例如，在浏览器中，全局变量的名称为 window；在 node.js 中，全局变量的名称为 global。这使得在不同的环境中编写跨平台代码变得更加困难。

为了解决这个问题，ES11 引入了 globalThis 对象。使用 globalThis，可以轻松地访问全局对象，在不同的环境中保持一致。

globalThis 的用处

globalThis 的主要用处是在不同的环境中编写跨平台代码时，访问全局对象。例如，以下代码：

// 在浏览器中
console.log(window.innerWidth);

// 在 node.js 中
console.log(global.innerWidth);

可以使用 globalThis 替换为：

console.log(globalThis.innerWidth);

这样，代码就可以在不同的环境中保持一致。

另外，globalThis 还可以用于解耦代码。例如，以下代码：

// file1.js
var x = 1;

// file2.js
console.log(x);

如果使用 globalThis 替换为以下代码：

// file1.js
globalThis.x = 1;

// file2.js
console.log(globalThis.x);

则不需要在 file2.js 中引入 file1.js 文件，就可以访问 x 变量。

示例代码

以下是一个使用 globalThis 的示例代码：

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

const globalObject = getGlobalObject();

globalObject.console.log("Hello, globalThis!");

在此示例代码中，getGlobalObject 函数返回一个全局对象。globalObject 对象使用了 getGlobalObject 函数返回的全局对象，并调用其 console.log 方法输出字符串 "Hello, globalThis!"。无论在哪个环境中运行此代码，globalThis 都会作为全局对象进行访问。

总结

ES11 引入的 globalThis 对象，是一个全局属性，指向全局的 this 值。它的主要用途是在不同的 JavaScript 环境中，访问全局对象，从而使代码在不同的环境中保持一致。通过使用 globalThis，可以避免在不同环境中使用不同的全局变量，使代码更加简洁、易于维护。

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