了解 ECMAScript 2020 中的全局对象 globalThis-JavaScript中文网-JavaScript教程资源分享门户

前言

在过去的 JavaScript 版本中，没有一个标准的方式来访问全局对象。不同的 JavaScript 环境可能有不同的全局对象，如浏览器环境中的 window 对象、node.js 环境中的 global 对象。这些全局对象的不一致性给一些移植性较强的代码带来了麻烦。为了解决这个问题，ECMAScript 2020 引入了一个标准的全局对象——globalThis。

globalThis 是什么？

globalThis 是 JavaScript 中的一个全局对象，用于在不同的环境中标准化地访问全局对象。globalThis 在所有 JavaScript 环境中都是存在的，不同环境下的全局对象，只需要通过 globalThis 访问即可。

通常情况下，在浏览器环境下，globalThis 就是 window 对象。在 node.js 环境下，globalThis 就是 global 对象。在 web worker 中，globalThis 就是 worker 的全局对象 self。

globalThis 为我们提供了一种标准的方式来访问全局对象，简化了代码的编写和移植性的工作。

globalThis 常见用途

1. 全局命名空间

在 JavaScript 中，很多开发者使用全局变量来定义一些全局的命名空间，这样可以确保其它模块不会意外地修改全局变量。但是，在不同的 JavaScript 环境中，全局变量的名称是不一样的，因此需要根据环境来选择。使用 globalThis，可以这样定义一个全局命名空间：

if (typeof globalThis.myNameSpace === 'undefined') {
  globalThis.myNameSpace = {};
}

这段代码将会在任何 JavaScript 环境中创建一个名为 "myNameSpace" 的全局命名空间。

2. 动态导入 ES 模块

在 ECMAScript 2020 之前，JavaScript 语言规范并没有提供一种动态导入 ES 模块的标准方式，因此不同环境下也有不同的实现。使用 globalThis，可以在任何 JavaScript 环境中动态导入 ES 模块：

async function importModule(moduleUrl) {
  const { default: module } = await globalThis.import(moduleUrl);
  return module;
}

该函数将动态加载指定的 ES 模块，并返回该模块的默认导出。在 web worker 中，globalThis.import() 将会使用 worker 的全局对象 self，而在 Node.js 中，globalThis.import() 将会使用 global 对象。

3. 调用全局函数

在 JavaScript 中，有一些全局函数是在所有环境中都存在的，例如：parseInt、encodeURIComponent、decodeURIComponent 等等。在过去，如果要在不同的环境中调用这些函数，需要使用不同全局对象访问，但是现在可以使用 globalThis 统一调用：

const number = globalThis.parseInt('123');
const url = globalThis.encodeURIComponent('https://www.example.com');

如果全局函数不是在所有环境中都存在，则需要使用环境特定的全局对象访问。

总结

globalThis 是 ECMAScript 2020 引入的一个标准全局对象，用于在所有 JavaScript 环境中统一访问全局对象。使用 globalThis 可以简化代码的编写和移植性的工作，同时支持动态导入 ES 模块、调用全局函数、定义全局命名空间等常见使用场景。

示例代码

1. 定义全局命名空间

if (typeof globalThis.myNameSpace === 'undefined') {
  globalThis.myNameSpace = {};
}

globalThis.myNameSpace.x = 10;
console.log(globalThis.myNameSpace.x); // 10

2. 动态导入 ES 模块

async function importModule(moduleUrl) {
  const { default: module } = await globalThis.import(moduleUrl);
  return module;
}

importModule('https://www.example.com/example.js').then(module => {
  console.log(module.default);
});

3. 调用全局函数

const number = globalThis.parseInt('123');
const url = globalThis.encodeURIComponent('https://www.example.com');

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