globalThis 的统一全局对象访问

在 JavaScript 的发展历程中，访问全局对象一直是一个因环境而异的问题。ES11 (ECMAScript 2020) 引入的 globalThis 属性终于为开发者提供了一个标准化的方式来访问全局对象，无论代码运行在何种环境中。本文将深入探讨 globalThis 的特性、使用场景及其重要性。

全局对象的历史问题

在 globalThis 出现之前，JavaScript 在不同环境中访问全局对象的方式各不相同：

在浏览器中：window（主线程）、self（Web Workers）
在 Node.js 中：global
在严格模式下：没有统一的访问方式

这种不一致性导致开发者不得不编写环境检测代码：

javascript 复制代码

const getGlobal = () => {
  if (typeof self !== 'undefined') return self
  if (typeof window !== 'undefined') return window
  if (typeof global !== 'undefined') return global
  throw new Error('无法找到全局对象')
}
const globals = getGlobal()

globalThis 的解决方案

globalThis 提供了一个标准化的属性，无论代码运行在何种环境中，都能正确引用到全局对象：

javascript 复制代码

// 浏览器中
console.log(globalThis === window) // true

// Node.js中
console.log(globalThis === global) // true

// Web Workers中
console.log(globalThis === self) // true

主要特性

环境无关性：在所有 JavaScript 环境中提供一致的访问方式
可预测性：避免了环境检测代码的复杂性
未来兼容：设计时就考虑了未来可能的新环境
可配置性：globalThis 是可写的（尽管通常不建议修改）

使用场景

1. 跨环境库开发

开发需要在多种环境中运行的库时，globalThis 是访问全局对象的理想选择：

javascript 复制代码

// 设置全局变量
globalThis.myLibrary = {
  version: '1.0.0',
  // ...
}

2. 特性检测

安全地检测全局对象是否支持某些特性：

javascript 复制代码

if (globalThis.Promise) {
  // 支持 Promise
}

3. Polyfill 开发

编写 polyfill 时，可以安全地添加到全局对象：

javascript 复制代码

if (!globalThis.myNewFeature) {
  globalThis.myNewFeature = function() {
    // 实现代码
  }
}

注意事项

性能考虑：globalThis 的访问速度可能略慢于直接使用环境特定的全局对象引用
安全性：在浏览器中，globalThis 可以被沙箱化或代理
兼容性：虽然现代环境都支持，但旧环境可能需要 polyfill

浏览器兼容性

globalThis 已被所有现代浏览器支持：

Chrome 71+
Firefox 65+
Safari 12.1+
Edge 79+
Node.js 12+

对于旧环境，可以使用简单的 polyfill：

javascript 复制代码

if (typeof globalThis === 'undefined') {
  Object.defineProperty(Object.prototype, '__magic__', {
    get: function() {
      return this
    },
    configurable: true
  })
  __magic__.globalThis = __magic__
  delete Object.prototype.__magic__
}

结论

globalThis 是 JavaScript 语言发展中的一个重要里程碑，它解决了长期存在的全局对象访问不一致问题。作为开发者，我们应该在需要访问全局对象的场景中使用 globalThis，以编写更加健壮、可移植的代码。随着旧环境的逐渐淘汰，globalThis 将成为访问全局对象的标准方式。