ECMAScript 2019 中的全局对象：使用 globalThis 解决多环境兼容性问题？
在前端开发的过程中，我们经常需要在不同的环境中运行我们的代码，例如在浏览器环境、Node.js 环境或者 Web Worker 中运行。这其中就会存在一些全局变量或者 API 需要跨越不同环境的情况，这时我们就需要有一种通用的方式来处理全局变量的问题。ECMAScript 2019 中提供了一种新的方案——globalThis，来解决这种多环境兼容性问题。
一、globalThis 的概念
globalThis 是什么？简单来说，它就是全局对象。在浏览器环境中，它对应 window 对象；在 Node.js 环境中，它对应 global 对象；在 Web Worker 中，它对应 workerGlobalScope 对象。
使用 globalThis 可以避免在不同环境中使用不同的全局变量，从而提高代码的兼容性和可维护性。
在浏览器中：
console.log(globalThis === window); // true
在 Node.js 环境中：
console.log(globalThis === global); // true
在 Web Worker 中：
console.log(globalThis === self); // true
二、globalThis 的使用
globalThis 的使用非常简单，只需要直接使用即可。它可以替代之前使用 window、global 或 self 的场景。
例如，在浏览器中使用：
globalThis.alert('Hello, world!');
在 Node.js 中使用：
const fs = require('fs'); const path = require('path'); const filePath = path.resolve(__dirname, 'test.txt'); globalThis.console.log(`filePath: ${filePath}`);
在 Web Worker 中使用：
globalThis.postMessage('Hello, world!');
如果将来出现了新的 JavaScript 运行环境，只需要支持 globalThis 就可以让代码跨越不同环境运行。
三、globalThis 的兼容性
目前，globalThis 在浏览器中的兼容性相对较好，主要浏览器的版本如下：
- Chrome 71+
- Firefox 65+
- Safari 12.1+
- Edge 79+
- Opera 58+
在 Node.js 中，globalThis 兼容性较差，需要使用全局变量才能兼容旧版本 Node.js。可以使用如下方法进行兼容性处理：
-- -------------------- ---- ------- ----- --------- - -------- -- - -- ------- ---- --- ------------ - ------ ----- - -- ------- ------ --- ------------ - ------ ------- - -- ------- ------ --- ------------ - ------ ------- - ----- --- ------------- -- ------ ------ --------- -- ----- ------------ - ------------ -------------------------------- ---------展开代码
注：getGlobal 函数先判断 self 是否存在，如果存在就返回 self 对象；如果不存在就判断 window 是否存在，如果存在就返回 window 对象；最后再判断 global 是否存在，如果存在就返回 global 对象。如果都不存在就抛出异常。
四、总结
在前端开发的过程中，我们需要处理不同环境下的全局变量问题，以求代码的兼容性和可维护性。ECMAScript 2019 中提供了一个新的全局对象 globalThis，可以解决这个问题。使用 globalThis 可以避免在不同环境中使用不同的全局变量，从而提高代码的兼容性和可维护性。
在浏览器中，globalThis 的兼容性相对较好，但在 Node.js 中需要使用一些兼容性处理。使用 getGlobal 函数可以判断环境并返回全局对象。
最后，我们应该养成良好的编程习惯，尽量避免使用全局变量，减少对全局变量的污染，降低代码的耦合性，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b856295b1f8cacd32b06e
