1. 背景
在 JavaScript 中，我们经常会使用全局变量来存储一些需要在多个函数中使用的数据，例如：
var username = "John";
function showMessage() {
console.log("Hello " + username);
}
showMessage(); // 输出 "Hello John"然而，使用全局变量会带来很多问题，比如：
- 命名冲突：如果不小心定义了重复的全局变量，会导致代码出错。
- 安全问题：全局变量可以被其他脚本或插件修改，可能会带来安全隐患。
为了解决这些问题，ES6 引入了 let 和 const 关键字，让变量的作用域更加明确。然而，全局变量问题仍然存在。
ES11 中引入了 globalThis 对象，可以解决 JavaScript 中的全局变量问题，本文将深入介绍该对象的特性及使用方法。
2. globalThis 的特性
globalThis 对象是一个全局对象，它提供了一个标准的、跨平台的方式来访问全局对象。无论是在浏览器端还是在 Node.js 环境下，我们都可以使用 globalThis 来访问全局变量。
console.log(globalThis); // 在浏览器中输出 "Window"，在 Node.js 中输出 "global"
globalThis 对象包含了很多与 JavaScript 运行环境相关的信息，例如：
- window 对象（在浏览器中）
- global 对象（在 Node.js 中）
- self 对象（在 Web Workers 中）
因此，使用 globalThis 对象可以避免在不同环境下访问全局变量时的命名冲突问题。
同时，globalThis 对象还包含了一些有用的方法和属性，例如：
- eval()：用于执行一个字符串作为 JavaScript 代码。
- parseInt() 和 parseFloat()：用于将一个字符串解析成数字。
- Promise、Map、Set 等内置对象：表示 JavaScript 的核心语言功能。
3. 如何使用 globalThis
使用 globalThis 对象非常简单，只需要像访问普通对象一样使用即可。
globalThis.username = "John";
function showMessage() {
console.log("Hello " + globalThis.username);
}
showMessage(); // 输出 "Hello John"在这个例子中，我们将 username 存储在全局变量 globalThis 中，然后在 showMessage 函数中访问它。
由于全局变量被存储在 globalThis 中，我们可以避免命名冲突的问题。
如果我们在另一个作用域中访问 globalThis，也可以成功获取到该变量。
-- -------------------- ---- ------- -------- ------------- - ------------------ - - --------------------- - -------- --------------- - --- -------- - ------ -------------- - ------------------- - ------- ---------------- -- -- ------ -----
在这个例子中，我们在 useGlobalThis 函数中定义了一个局部变量 username，然后在 showMessage 函数中访问全局变量 globalThis.username，最终输出的是全局变量的值，而不是局部变量的值。
4. 注意事项
在使用 globalThis 时，需要注意一些问题：
- 在旧版本的浏览器中可能不支持 globalThis，可以使用以下代码进行兼容：
var globalObject = (typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : undefined);
- globalThis 只是一个全局的对象，不能替代 let 和 const 来声明局部变量。
- 如果你需要在多个 JavaScript 文件中共享变量，每个文件中都需要使用 globalThis 来访问该变量。
5. 结论
全局变量在 JavaScript 中一直是一个问题，ES11 中引入的 globalThis 对象可以解决这个问题，并提供了一种标准的、跨平台的方式来访问全局变量。
使用 globalThis 可以避免命名冲突问题，并且提供了一些有用的方法和属性，使得 JavaScript 的核心功能更加丰富。
但是在使用 globalThis 时，需要特别注意它的作用范围和兼容性问题，防止出现意外的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700c588579ed1eb16401a44