JS `globalThis` (ES2020)：统一访问全局对象

各位观众老爷，大家好！我是你们的老朋友，今天咱们不聊风花雪月，来聊聊JavaScript里一个有点意思的小玩意儿——globalThis。

开场白：全局对象大乱斗

话说，在JavaScript的世界里，全局对象一直是个让人头疼的存在。为啥呢？因为在不同的环境里，它长得不一样！

• 在浏览器里，它是window（或者self，但咱们一般都用window）。
• 在Node.js里，它是global。
• 在Web Workers里，它又是self。

这可苦了我们这些程序员了，想写一份通用的代码，就得不停地判断当前环境，然后使用对应的全局对象。

// 以前的写法，各种判断
let globalObject;
if (typeof window !== 'undefined') {
  globalObject = window;
} else if (typeof global !== 'undefined') {
  globalObject = global;
} else if (typeof self !== 'undefined'){
  globalObject = self;
} else {
  // 兜底方案，通常不会走到这里
  globalObject = {};
}

// 现在终于可以这样了
// const globalObject = globalThis; // 这里只是为了演示，不用再次声明

这种代码，写多了头都大了。所以，ES2020就推出了globalThis，它就像一个万能钥匙，无论你在哪个环境里，都能用它来访问全局对象。

globalThis：一统江湖的英雄

globalThis是一个全局属性，它的值总是全局对象。简单来说，它就是JavaScript世界里的“宇宙中心”，不管你在哪个角落，都能通过它找到家。

// 在浏览器里
console.log(globalThis === window); // true

// 在Node.js里
console.log(globalThis === global); // true

// 在Web Worker里
console.log(globalThis === self); // true

是不是很方便？有了globalThis，我们就可以告别那些繁琐的环境判断了。

globalThis的用法：简单粗暴有效

globalThis的用法非常简单，直接用就行了。比如，你想访问全局的setTimeout函数，就可以这样写：

globalThis.setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

是不是感觉代码瞬间清爽了很多？

globalThis的polyfill：兼容老版本浏览器

虽然globalThis是ES2020的新特性，但我们还是可以用polyfill来让它在老版本的浏览器里也能正常工作。

// Polyfill for globalThis
(function() {
  if (typeof globalThis === 'undefined') {
    if (typeof self !== 'undefined') {
      globalThis = self;
    } else if (typeof window !== 'undefined') {
      globalThis = window;
    } else if (typeof global !== 'undefined') {
      globalThis = global;
    } else {
      globalThis = {};
    }
  }
})();

这段代码很简单，就是判断当前环境，然后把对应的全局对象赋值给globalThis。

globalThis的应用场景：无处不在的便利

globalThis的应用场景非常广泛，只要你需要访问全局对象，就可以用它。

• 模块化开发： 在编写模块化的代码时，可以使用globalThis来访问全局变量，而不用担心环境的差异。

  // module.js
  globalThis.myGlobalVariable = 'Hello from module!';
  
  // main.js
  console.log(globalThis.myGlobalVariable); // Hello from module!

• 库和框架开发： 在开发库和框架时，可以使用globalThis来创建全局的工具函数或对象，方便用户使用。

  // my-library.js
  globalThis.myLibrary = {
    version: '1.0.0',
    greet: function(name) {
      return 'Hello, ' + name + '!';
    }
  };
  
  // app.js
  console.log(globalThis.myLibrary.greet('Alice')); // Hello, Alice!

• 跨平台开发： 在开发跨平台的应用时，可以使用globalThis来访问不同平台的全局API，而不用编写大量的条件判断。例如，你可能需要访问浏览器的localStorage或者Node.js的process对象。

  // 跨平台代码
  function saveToStorage(key, value) {
    if (typeof localStorage !== 'undefined') {
      localStorage.setItem(key, value);
    } else if (typeof process !== 'undefined' && process.versions && process.versions.node) {
      // Node.js环境，可以使用文件系统或其他方式存储
      // 这里只是一个占位符，实际需要根据Node.js的具体情况实现
      console.log(`Saving to file: ${key} = ${value}`);
    } else {
      console.log('No storage available.');
    }
  }
  
  // 使用globalThis简化
  function saveToStorageSimplified(key, value) {
    if (typeof globalThis.localStorage !== 'undefined') {
      globalThis.localStorage.setItem(key, value);
    } else if (typeof globalThis.process !== 'undefined' && globalThis.process.versions && globalThis.process.versions.node) {
      // Node.js环境
      console.log(`Saving to file: ${key} = ${value}`);
    } else {
      console.log('No storage available.');
    }
  }

globalThis的注意事项：一些小细节

虽然globalThis很好用，但还是有一些小细节需要注意：

• 不要滥用： 虽然globalThis可以让你方便地访问全局对象，但不要滥用它。过度使用全局变量会导致代码难以维护和调试。
• 命名冲突： 使用globalThis创建全局变量时，要注意避免命名冲突。最好使用一个独特的前缀来命名你的全局变量。
• 安全性： 在Web Workers里，globalThis指向的是worker的全局对象，而不是主线程的window对象。这意味着你不能直接通过globalThis来访问主线程的DOM。

globalThis vs window vs global vs self：一个表格胜千言

为了让大家更清楚地了解globalThis和其他全局对象的区别，我特意制作了一个表格：

全局对象	适用环境	描述
window	浏览器	浏览器的全局对象，包含了浏览器提供的各种API，比如document、setTimeout等。
global	Node.js	Node.js的全局对象，包含了Node.js提供的各种API，比如process、require等。
self	浏览器 (Web Workers) / Service Workers	在Web Workers和Service Workers里，self指向的是worker的全局对象，包含了worker提供的各种API，比如postMessage、addEventListener等。 在主线程中，self等同于window，但在严格模式下，self不会被隐式绑定到全局对象。
globalThis	所有环境	ES2020新增的全局对象，无论你在哪个环境里，它都指向全局对象。

案例分析：一个跨平台工具函数

假设我们需要编写一个工具函数，用于获取当前环境的信息。以前，我们可能需要这样写：

function getEnvironment() {
  if (typeof window !== 'undefined') {
    return 'browser';
  } else if (typeof global !== 'undefined') {
    return 'node';
  } else if (typeof self !== 'undefined') {
    return 'web worker';
  } else {
    return 'unknown';
  }
}

有了globalThis，我们可以这样写：

function getEnvironment() {
  if (globalThis === window) {
    return 'browser';
  } else if (globalThis === global) {
    return 'node';
  } else if (globalThis === self) {
    return 'web worker';
  } else {
    return 'unknown';
  }
}

// 更简洁的方式
function getEnvironmentSimplified() {
  if (typeof globalThis.window !== 'undefined') {
    return 'browser';
  } else if (typeof globalThis.process !== 'undefined' && globalThis.process.versions && globalThis.process.versions.node) {
    return 'node';
  } else if (typeof globalThis.importScripts === 'function') {
    return 'web worker'; //检查importScripts函数来判断是否是worker
  } else {
    return 'unknown';
  }
}

console.log(getEnvironmentSimplified());

虽然代码量没有减少很多，但是可读性提高了不少。而且，我们可以更方便地访问不同环境的API。

进阶讨论：globalThis和模块化

在模块化的开发中，我们通常会使用import和export来导入和导出模块。在这种情况下，我们还需要使用globalThis吗？

答案是：视情况而定。

• 如果你的模块只是一个纯粹的函数库，不需要访问全局对象，那么你就不需要使用globalThis。

  // utils.js
  export function add(a, b) {
    return a + b;
  }
  
  // app.js
  import { add } from './utils.js';
  console.log(add(1, 2)); // 3

• 如果你的模块需要在全局环境中注册一些东西，或者需要访问全局变量，那么你就可以使用globalThis。

  // my-library.js
  globalThis.myLibrary = {
    version: '1.0.0',
    greet: function(name) {
      return 'Hello, ' + name + '!';
    }
  };
  
  // app.js
  import './my-library.js'; // 导入模块，但不需要使用任何导出的东西
  console.log(globalThis.myLibrary.greet('Alice')); // Hello, Alice!

总结：globalThis，你值得拥有

总而言之，globalThis是一个非常实用的新特性，它可以帮助我们编写更简洁、更通用的JavaScript代码。虽然它只是一个小小的语法糖，但却能大大提高我们的开发效率。

记住，globalThis就像你的瑞士军刀，虽然平时可能用不上，但一旦需要，它就能帮你解决大问题。

最后：一个彩蛋

你知道吗？globalThis这个名字，其实是经过一番激烈的讨论才定下来的。一开始，社区还考虑过universalThis、globalObject等名字，但最终还是选择了globalThis，因为它最能表达它的含义。

好了，今天的讲座就到这里。希望大家都能喜欢上globalThis，并在实际开发中多多使用它。

感谢大家的收听！下次再见！