为什么 ES10 引入了 globalThis 对象？

在 ES6 以前，JavaScript 的全局对象是 window，但是在非浏览器环境下（比如 Node.js），全局对象是 global。这带来了一些不方便的问题，比如如何在不同环境下编写跨平台代码。

ES10 引入了 globalThis 对象来解决这个问题。globalThis 是一个全局对象，在浏览器和非浏览器环境下都能使用，它的属性和方法都可以在全局作用域下访问。

为什么需要 globalThis？

在不同的 JavaScript 环境中，全局对象的名称不同。比如在浏览器中，全局对象是 window，而在 Node.js 中，全局对象是 global。这样就会导致在跨平台编写代码时出现问题，因为使用不同的全局对象会导致代码在不同的环境下表现不同。

举个例子，假设我们想要在全局作用域下定义一个变量，在浏览器环境下，我们可以使用 window 对象：

window.myVar = 'hello';

但是在 Node.js 环境下，我们需要使用 global 对象：

global.myVar = 'hello';

这样就会导致代码在不同的环境下表现不同，给跨平台编写代码带来了很大的困扰。

如何使用 globalThis？

使用 globalThis 对象非常简单，只需要在全局作用域下访问它的属性和方法即可。比如：

globalThis.setTimeout(() => {
  console.log('hello');
}, 1000);

这样就能在任何 JavaScript 环境下使用 setTimeout 函数了。

示例代码

下面是一个使用 globalThis 的示例代码，它会在浏览器和 Node.js 环境下都能运行：

if (typeof globalThis === 'undefined') {
  if (typeof window !== 'undefined') {
    // 浏览器环境下
    globalThis = window;
  } else if (typeof global !== 'undefined') {
    // Node.js 环境下
    globalThis = global;
  }
}

globalThis.myVar = 'hello';

console.log(globalThis.myVar);

在这个示例代码中，我们首先判断了是否存在 globalThis 对象，如果不存在，就根据当前环境来设置全局对象。然后我们在全局作用域下定义了一个变量 myVar，并打印出来。通过这个示例代码，我们可以在任何 JavaScript 环境下都能使用 globalThis 对象了。

总结

globalThis 对象的引入解决了在不同 JavaScript 环境下全局对象名称不同的问题。它是一个全局对象，在浏览器和非浏览器环境下都能使用，它的属性和方法都可以在全局作用域下访问。使用 globalThis 对象非常简单，只需要在全局作用域下访问它的属性和方法即可。

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