ES11 中新增的 globalThis 对象解决全局变量污染问题

全局变量是前端开发中常见的问题之一。如果我们在多个 JavaScript 文件中定义了同名的全局变量，就会导致命名冲突和代码混乱。为了解决这个问题，ES11 新增了 globalThis 对象，它提供了一个标准化的全局对象，可以在任何环境中使用，无需担心全局变量污染的问题。

globalThis 对象的引入

在 JavaScript 中，全局对象可以使用 window，在一些非浏览器环境中可能使用 global。这种方式虽然解决了问题，但不够标准化，而且不可移植。此外，在一些情况下，全局对象甚至无法访问。例如，当我们在 Web Worker 中使用 JavaScript 时，我们需要使用 self 对象来代替全局对象。

为了解决这个问题，ES11 引入了 globalThis 对象。它提供了一个标准的、跨平台的全局对象，不论在哪个环境中使用 JavaScript，我们都可以通过 globalThis 访问到全局对象。

globalThis 对象的使用

使用 globalThis 对象非常简单，您只需要在代码中使用全局对象的地方替换为 globalThis 即可。例如，如果你需要访问全局变量 foo，你可以使用 globalThis.foo。

下面是一个示例代码，演示如何使用 globalThis 对象读取全局变量：

// 定义全局变量 foo
var foo = 'bar';

// 使用 globalThis 访问全局变量
console.log(globalThis.foo); // 输出 'bar'

值得注意的是，使用 globalThis 对象可以更加简洁，避免了使用不同的全局对象，提高代码的可读性和可维护性。

指导意义

使用 globalThis 对象可以有效地避免全局变量污染的问题，同时提高 JavaScript 代码的可移植性和可维护性。在编写 JavaScript 代码时，我们应该尽量避免使用全局变量，而是使用闭包和模块化的方式来管理变量。

此外，我们还应该了解 JavaScript 环境的全局对象是哪个，在不同的环境中使用正确的全局对象。

补充说明

在浏览器中，globalThis 等价于 window，所以通过 globalThis 获取 window 对象也是可行的。

在 Node.js 中，globalThis 等价于 global。

结论

ES11 中新增的 globalThis 对象提供了一个标准的、跨平台的全局对象，有效地解决了全局变量污染的问题，同时提高了 JavaScript 代码的可移植性和可维护性。在编写 JavaScript 代码时，我们应该了解 JavaScript 环境的全局对象是什么，并尽量避免使用全局变量，使用闭包和模块化的方式来管理变量。

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