在以前的 JavaScript 版本中，全局对象的名称不是标准化的，浏览器中的全局对象是 window，Node.js 中的全局对象是 global，这给跨平台开发带来了一些麻烦。ES10 中引入的 globalThis 解决了这个问题，它提供了一种标准的方式来访问全局对象。
globalThis 的用法
在全局范围内使用 globalThis 可以访问全局对象，而不用担心它会在不同的宿主环境中表现不同。例如，以下代码演示了如何在不同环境中使用 globalThis：
// 在浏览器中，globalThis 是 window console.log(globalThis.document === window.document); // true // 在 Node.js 中，globalThis 是 global console.log(globalThis.process === global.process); // true
在函数中使用 globalThis 可以访问全局对象，而不用担心该函数在哪个上下文中运行。例如，以下代码演示了如何在函数中使用 globalThis：
function getGlobal() {
return globalThis;
}
console.log(getGlobal() === window); // true，如果在浏览器中运行
console.log(getGlobal() === global); // true，如果在 Node.js 中运行globalThis 的实际应用场景
- 与其他宿主环境的框架兼容性
使用 globalThis 可以简化与其他宿主环境的框架的兼容性。例如，在使用 React 的项目中，通常会使用 window 对象来访问全局状态（如 Redux store），但在 React Native 环境中，全局变量是 global 对象。使用 globalThis 可以轻松访问全局状态，而不必担心在不同的宿主环境中使用不同的全局变量。
以下代码演示了一个使用 globalThis 的组件（需要先安装 redux 和 react-redux），它可以在不同的宿主环境中访问全局状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
----- ------- - -- -- -
----- ------- --------- - ------------------
----- --------- - -- -- -
---------------- ----- ----------- ---
-------------- - ---
--
----- --------- - -- -- -
---------------- ----- ----------- ---
-------------- - ---
--
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
--
----- --- - -- -- -
--------- --------------
-------- --
-----------
--
---------------- - ------ -- ---- -----
------------------- - --------- -- ---- --------
------------------ - -------- -- ---- -------
-------------- - ---- -- ---- ---在浏览器或 Node.js 中，您可以访问全局组件 App，如下所示：
-- -------------------- ---- ------- -- ----- -------------------- --- --------------------------------- -- - ------- - ----- ------ - ---------------------------------- ---- -- - ----- ---- - ---------------------------------- ---- -------------- --- --------------------
- 操作 Web Workers
Web Workers 是浏览器提供的多线程机制，可以在另一个线程中运行 JavaScript 代码。与全局对象的交互需要使用 postMessage 和 onmessage，在不同的 Web Worker 中访问全局对象比较困难。使用 globalThis 可以轻松地访问全局对象（如 window 或 self），并将其传输到其他 Web Worker。
以下代码演示了如何在 Web Worker 中使用 globalThis：
-- -------------------- ---- ------- -- ------- ----- ------ - --- ---------------------- ---------------- - --- -- - -------------------- -- ------- ------- -- -------------------------- ---------- -- --------- --------- - --- -- - ----- --------- - ----------- ----------------------------- --------- -
结论
globalThis 的引入大大简化了跨平台开发中与全局对象的交互，同时提供了操作 Web Workers 的更便利的方式，是 ES10 中值得掌握的一项新技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749dab6a1ce00635472f45d