JS `globalThis` (ES2020)：统一的全局对象访问 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是你们的老朋友，BUG终结者，今天咱们来聊聊JavaScript里一个神奇的家伙——globalThis。这家伙的出现，简直就像是黑暗森林里的一盏明灯，指引着我们在各种环境下都能找到那个唯一的“老大哥”——全局对象。

一、曾经的痛：全局对象寻觅记

在globalThis出现之前，JavaScript的全局对象简直是个薛定谔的猫，你在不同的环境里打开盒子，看到的可能都不一样：

浏览器里： 稳如老狗的window。self也行，但总感觉不够霸气。
Node.js里： 神秘兮兮的global，有点高冷。
Web Workers里： 委曲求全的self，毕竟寄人篱下。
其他奇奇怪怪的环境： 谁知道呢？反正能跑就行。

这种混乱带来的问题可不小，尤其是当你写一些需要在多个环境运行的通用代码（比如库或者框架）时，你不得不写出这样的代码：

// 兼容各种环境的写法，简直是噩梦
var globalObject = (typeof window !== 'undefined') ? window :
                    (typeof global !== 'undefined') ? global :
                    (typeof self !== 'undefined') ? self :
                    {}; // 兜底方案，防止崩盘

看到没？为了找到全局对象，我们不得不像侦探一样，用typeof运算符挨个排查，代码丑陋不说，效率还低。更可怕的是，如果未来又冒出来一个新环境，你的代码可能就直接GG了。

二、英雄登场：globalThis的救赎之路

ES2020（ES11）标准横空出世，带来了globalThis这个救星。globalThis就像一个万能钥匙，无论你在哪个JavaScript运行环境里，它都能准确地指向全局对象。

有了globalThis，上面的代码就可以简化成这样：

// 一行代码，搞定一切！
var globalObject = globalThis;

是不是感觉世界都清净了？代码简洁了，可读性提高了，妈妈再也不用担心我的环境兼容问题了！

三、globalThis的原理：它到底是怎么做到的？

你可能会好奇，globalThis是如何做到在不同环境里都能找到全局对象的？这就要归功于它的实现机制了。

实际上，globalThis并不是一个简单的变量，而是一个内置的属性。它通过一系列的检查和判断，最终确定全局对象。具体的实现细节可能会因环境而异，但大致的思路如下：

先尝试this： 在非严格模式下，顶层的this通常指向全局对象。但如果在函数或者类里，this的指向就变了。
检查window、global、self： 如果this不行，就按照之前的逻辑，依次检查window、global、self这些常见的全局对象。
兜底方案： 如果以上方法都失败了，globalThis可能会创建一个新的对象作为全局对象，或者直接抛出一个错误。

需要注意的是，globalThis本身也是一个全局属性，这意味着你可以在任何地方直接访问它，而不需要额外的导入或者声明。

四、globalThis的应用场景：哪里需要它？

globalThis的应用场景非常广泛，只要你需要访问全局对象，都可以使用它。下面是一些常见的例子：

编写跨平台库/框架： 这是globalThis最主要的应用场景。它可以让你编写在浏览器、Node.js、Web Workers等多个环境运行的代码，而不用担心全局对象的问题。

// 跨平台库的例子
(function() {
  // 检查是否存在某个全局变量
  if (typeof globalThis.myLibrary === 'undefined') {
    globalThis.myLibrary = {
      version: '1.0.0',
      doSomething: function() {
        console.log('Hello from myLibrary!');
      }
    };
  }
})();

// 在浏览器里：
// myLibrary.doSomething(); // 输出 "Hello from myLibrary!"

// 在Node.js里：
// global.myLibrary.doSomething(); // 输出 "Hello from myLibrary!"

编写polyfill： Polyfill是一种用于在旧浏览器中模拟新特性的技术。globalThis可以让你在全局对象上添加polyfill，而不用担心环境兼容性问题。

// Polyfill for Array.prototype.flat
if (!Array.prototype.flat) {
  Object.defineProperty(Array.prototype, 'flat', {
    configurable: true,
    value: function flat() {
      var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0]);
      return depth ? Array.prototype.concat.apply([], this.map(function (i) {
        if (Array.isArray(i)) {
          return depth > 1 ? i.flat(depth - 1) : i;
        } else {
          return [i];
        }
      })) : Array.prototype.slice.call(this);
    }
  });
}

访问全局变量： 有时候，你需要访问一些全局变量，比如console、setTimeout等。globalThis可以让你更方便地访问这些变量，而不用担心环境差异。
```
// 使用globalThis访问setTimeout
globalThis.setTimeout(function() {
  console.log('Hello after 1 second!');
}, 1000);
```
模块化开发： 在模块化开发中，每个模块都有自己的作用域。globalThis可以让你在模块内部访问全局对象，而不用担心变量污染问题。
```
// 模块内部访问全局对象
export function doSomething() {
  globalThis.console.log('Doing something...');
}
```

五、globalThis的兼容性：哪些浏览器/Node.js版本支持它？

globalThis是ES2020标准的一部分，这意味着它需要较新的浏览器和Node.js版本才能支持。

浏览器： 绝大多数现代浏览器都支持globalThis，包括Chrome、Firefox、Safari、Edge等。如果你需要兼容旧版本的浏览器，可以使用polyfill。
Node.js： Node.js 12.0.0及以上版本原生支持globalThis。如果你需要兼容旧版本的Node.js，可以使用es6-shim或者类似的polyfill。

你可以使用Can I use网站（https://caniuse.com/）来查询globalThis的具体兼容性信息。

六、globalThis vs window/global/self：谁才是真爱？

你可能会问，既然有了globalThis，我们是不是就可以彻底抛弃window、global、self这些老家伙了？

理论上是可以的，globalThis是更现代、更通用的选择。但是，在实际开发中，你可能仍然需要根据具体情况来选择。

window： 如果你的代码只在浏览器环境运行，并且你需要访问一些浏览器特有的API（比如document、navigator等），那么window仍然是一个不错的选择。
global： 如果你的代码只在Node.js环境运行，并且你需要访问一些Node.js特有的API（比如process、require等），那么global仍然是一个不错的选择。
self： 在Web Workers环境里，self仍然是访问全局对象的首选方式。

总的来说，globalThis是一个更安全、更通用的选择，但window、global、self在某些特定场景下仍然有其存在的价值。

| 对象 | 适用环境 | 优点 the following is a common scenario where one might see it:

globalThis： 适用于任何JavaScript环境，是跨平台开发的首选。

七、globalThis的陷阱：也要小心！

虽然globalThis很强大，但也不是万无一失的。在使用它的时候，也要注意一些潜在的陷阱：

全局变量污染： 虽然globalThis可以让你访问全局对象，但也要小心不要过度使用，避免全局变量污染。尽量使用模块化开发，将变量限制在局部作用域内。
命名冲突： 如果你的代码中定义了一个与globalThis同名的变量，可能会导致一些问题。建议避免使用globalThis作为变量名。
性能问题： 虽然globalThis的性能已经经过优化，但在某些极端情况下，可能会比直接访问window、global等全局对象略慢。不过，这种性能差异通常可以忽略不计。
Polyfill的局限性： 如果你在旧版本的浏览器中使用globalThis的polyfill，可能会遇到一些兼容性问题。建议在使用polyfill之前，仔细测试你的代码。

八、globalThis的未来：会进化成什么样？

globalThis的出现，标志着JavaScript在跨平台开发方面迈出了重要一步。未来，globalThis可能会继续进化，提供更多的功能和特性。

更强大的polyfill： 随着浏览器和Node.js的不断发展，globalThis的polyfill可能会变得更加完善，提供更好的兼容性。
更多的全局API： 未来可能会有更多的全局API添加到globalThis上，方便开发者在不同环境中使用。
更好的模块化支持： globalThis可能会与模块化系统更好地集成，提供更方便的全局变量访问方式。

九、总结：globalThis，你的好朋友！

globalThis是ES2020标准中一个非常重要的特性，它统一了JavaScript的全局对象访问方式，让跨平台开发变得更加简单。虽然在使用globalThis的时候需要注意一些潜在的陷阱，但总的来说，它是一个非常有用的工具，值得我们深入学习和掌握。

记住，globalThis是你的好朋友，它会帮助你解决各种全局对象的问题！

好了，今天的讲座就到这里。希望大家有所收获！如果大家还有什么问题，可以在评论区留言，我会尽力解答。下次再见！

发表回复 取消回复

发表回复取消回复