ES11 中如何使用 globalThis 对象替代四大全局变量

在过去的 JavaScript 版本中，我们一直使用四大全局变量：window、self、global 和 this 来访问全局作用域。但在 ES11 版本中，我们可以使用 globalThis 对象来代替这些全局变量。本文将介绍 globalThis 的用法和优势。

globalThis 的定义和作用

globalThis 是一个新的 JavaScript 全局对象，在 ES11 中首次引入。它的作用是提供一个标准的、跨平台的方式来访问全局作用域中的属性和方法，不受执行环境的限制。无论在浏览器还是在 Node.js 等环境中，都可以使用 globalThis 代表全局对象。

globalThis 的优势和使用场景

使用 globalThis 的优势在于，它可以解决不同执行环境下全局对象的命名不一致问题。以前我们需要写如下代码：

// 访问全局对象 window
if (typeof window !== 'undefined') {
  window.alert('Hello World!');
}

// 访问全局对象 global
if (typeof global !== 'undefined') {
  global.console.log('Hello World!');
}

在 ES11 中，我们只需要写一行代码：

// 使用 globalThis 访问全局对象
globalThis.alert('Hello World!');
globalThis.console.log('Hello World!');

此外，globalThis 还可以用来解决给浏览器和服务端环境编写代码时的兼容性问题。

如何使用 globalThis

使用 globalThis 要点如下：

• globalThis 是一个 JavaScript 全局对象
• 无论在浏览器、Node.js 还是其他 JavaScript 执行环境中，都可以使用 globalThis
• 使用 globalThis 不需要担心全局变量名冲突的问题

下面是示例代码：

// 访问全局对象 window 和浏览器中的 XMLHttpRequest 对象
if (typeof window !== 'undefined') {
  console.log(window.XMLHttpRequest);
}

// 统一使用 globalThis 访问全局对象和 XMLHttpRequest 对象
console.log(globalThis.XMLHttpRequest);

总结

globalThis 是一个方便而且实用的 JavaScript 全局对象，可以用来代替四大全局对象，并解决不同执行环境下全局对象命名不一致的问题。我们在编写 JavaScript 代码时，应该尽量使用 globalThis 而不是使用全局变量，以避免命名冲突和兼容性问题。

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