ECMAScript 2020 (ES11) 中的 globalThis 全局对象详解

在 ECMAScript 2020 (ES11) 中，新增加了一个全局对象 globalThis，它是一个全局可访问的对象，可以在任何地方使用。本文将详细介绍 globalThis 对象的作用、用法和示例。

globalThis 对象的作用

在早期的 JavaScript 版本中，全局对象是 window 对象。然而，随着 JavaScript 的发展，出现了多个宿主环境，例如浏览器、Node.js 等，全局对象的实现方式也不同。在这种情况下，使用全局对象会导致代码在不同的宿主环境下出现兼容性问题。

为了解决这个问题，globalThis 对象应运而生。它可以在任何宿主环境中使用，不需要担心兼容性问题。globalThis 对象是一个全局可访问的对象，它包含了所有宿主环境中的全局对象。

globalThis 对象的用法

globalThis 对象可以在任何地方使用，例如在函数、类、模块等中。以下是一些常用的用法：

在浏览器中使用

在浏览器中，globalThis 对象就是 window 对象。可以通过以下方式访问：

console.log(globalThis === window); // true

在 Node.js 中使用

在 Node.js 中，globalThis 对象就是 global 对象。可以通过以下方式访问：

console.log(globalThis === global); // true

在函数中使用

在函数中，可以使用 globalThis 对象来访问全局作用域中的变量和函数，例如：

function test() {
  console.log(globalThis.Math.random());
}
test(); // 在浏览器和 Node.js 中都可以正常运行

在类中使用

在类中，可以使用 globalThis 对象来访问全局作用域中的变量和函数，例如：

class Test {
  constructor() {
    console.log(globalThis.Date.now());
  }
}
new Test(); // 在浏览器和 Node.js 中都可以正常运行

在模块中使用

在模块中，可以使用 globalThis 对象来访问全局作用域中的变量和函数，例如：

export function test() {
  console.log(globalThis.JSON.stringify({}));
}

globalThis 对象的示例

以下是一些使用 globalThis 对象的示例代码：

示例 1：获取全局对象

console.log(globalThis);

输出结果：

Window { ... } // 在浏览器中
Object [global] { ... } // 在 Node.js 中

示例 2：获取全局作用域中的变量

const a = 'hello';
console.log(globalThis.a);

输出结果：

undefined // 在浏览器和 Node.js 中都是 undefined

示例 3：获取全局作用域中的函数

function test() {
  console.log('test');
}
globalThis.test();

输出结果：

test // 在浏览器和 Node.js 中都可以正常运行

总结

globalThis 对象是一个全局可访问的对象，可以在任何宿主环境中使用，不需要担心兼容性问题。它包含了所有宿主环境中的全局对象。在函数、类、模块等中，可以使用 globalThis 对象来访问全局作用域中的变量和函数。

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