标准化的globalThis对象

globalThis 的诞生背景

ECMAScript 2019（ES10）引入的globalThis对象解决了JavaScript环境中的全局对象访问难题。不同环境下的全局对象存在差异：浏览器中是window，Node.js中是global，Web Workers中是self，严格模式下this可能为undefined。这种碎片化导致代码需要复杂的环境判断：

// 传统跨环境全局对象获取方式
const getGlobal = () => {
  if (typeof self !== 'undefined') return self
  if (typeof window !== 'undefined') return window
  if (typeof global !== 'undefined') return global
  throw new Error('无法找到全局对象')
}
const globalObj = getGlobal()

globalThis 的核心特性

globalThis作为标准化的全局对象访问方式，具有以下关键特性：

1. 环境无关性：在任何JavaScript运行时环境中都指向顶层的全局对象
2. 不可配置不可写：Object.getOwnPropertyDescriptor(globalThis, 'globalThis')会返回configurable: false
3. 与现有全局对象的关系：

   // 浏览器环境
   globalThis === window // true
   
   // Node.js环境
   globalThis === global // true
   
   // Web Worker环境
   globalThis === self // true
   

实际应用场景

跨环境库开发

开发需要同时运行在浏览器和Node.js环境的库时，不再需要环境检测：

// 统一设置全局配置
globalThis.LIB_CONFIG = {
  version: '1.0.0',
  debugMode: false
}

// 跨环境访问
function getConfig() {
  return globalThis.LIB_CONFIG || {}
}

全局变量管理

安全地检测和操作全局变量：

// 检查全局变量是否存在
if (!globalThis.Promise) {
  // 注入polyfill
  globalThis.Promise = require('es6-promise').Promise
}

// 避免全局污染的安全写法
(function(global) {
  const privateVar = '内部变量'
  global.publicApi = {
    getVar: () => privateVar
  }
})(globalThis)

与模块系统的交互

即使在模块作用域下也能访问真正的全局对象：

// ES模块中
let globals = Object.keys(globalThis)
console.log(globals.includes('setTimeout')) // true

// 与CommonJS模块互操作
if (typeof module !== 'undefined' && module.exports) {
  module.exports = { globalThis }
}

兼容性与转译方案

虽然现代环境普遍支持globalThis，但需要考虑旧环境兼容：

Polyfill实现

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

Babel配置

通过@babel/plugin-transform-global-this插件转换：

{
  "plugins": ["@babel/plugin-transform-global-this"]
}

TypeScript支持

在tsconfig.json中配置lib包含ES2019：

{
  "compilerOptions": {
    "lib": ["ES2019", "DOM"]
  }
}

特殊环境行为差异

不同JavaScript引擎对globalThis的实现存在细微差别：

1. 浏览器中的iframe隔离：

   // 主页面
   globalThis.mainVar = 'value'
   
   // iframe内
   console.log(globalThis.mainVar) // undefined (跨域情况下)
   

2. Node.js的REPL特殊行为：

   // Node.js REPL中
   globalThis === this // true (仅在REPL中成立)
   

3. Deno环境：

   // Deno中
   globalThis === window // true (与浏览器保持一致)
   

安全考量与最佳实践

1. 避免直接扩展：

   // 不推荐
   globalThis.customApi = {...}
   
   // 推荐方式
   const GLOBAL_APIS = Symbol('global-apis')
   globalThis[GLOBAL_APIS] = {...}
   

2. 冻结关键全局属性：

   Object.defineProperty(globalThis, 'MY_APP', {
     value: Object.freeze({...}),
     writable: false,
     configurable: false
   })
   

3. 沙箱环境检测：

   function isSandboxed() {
     try {
       return globalThis === undefined || 
              globalThis.Function('return this')() !== globalThis
     } catch {
       return true
     }
   }
   

性能影响与优化

globalThis访问性能在不同引擎中的表现：

// 性能测试对比
console.time('window access')
for (let i = 0; i < 1e6; i++) window
console.timeEnd('window access')

console.time('globalThis access')
for (let i = 0; i < 1e6; i++) globalThis
console.timeEnd('globalThis access')

典型结果：

• Chrome: 两者基本相当
• Firefox: globalThis稍慢约5%
• Safari: 初始访问有约15%差异，后续调用被优化

与其它语言特性的交互

与Proxy的配合使用

创建全局对象的保护层：

const guardedGlobal = new Proxy(globalThis, {
  set(target, prop, value) {
    if (prop.startsWith('_INTERNAL_')) {
      throw new Error(`禁止设置内部属性 ${prop}`)
    }
    return Reflect.set(target, prop, value)
  }
})

guardedGlobal.safeVar = 42 // 允许
guardedGlobal._INTERNAL_temp = 'x' // 抛出错误

与ShadowRealm API的结合

const realm = new ShadowRealm()
realm.evaluate(`
  globalThis === this // true (在新的全局环境中)
  globalThis === window // false
`)

历史提案演变过程

globalThis的标准化经历了多个阶段：

1. 2018年3月：首次提出提案（stage 1）
2. 2018年7月：进入stage 2，讨论System.global等备选名称
3. 2019年1月：确定globalThis名称并进入stage 3
4. 2019年6月：随ES2019发布成为标准

关键争议点：

• 命名方案（考虑过global、System.global等）
• Web兼容性问题（某些古老浏览器中window不可覆盖）
• 与现有polyfill的冲突处理

引擎实现细节

主要JavaScript引擎的实现方式：

1. V8引擎：

   • 在v8::Context中维护全局代理
   • 通过%Global()内部函数访问

2. SpiderMonkey：

   • 使用JS::GetGlobalForObject内部方法
   • 特殊处理Web Worker的边界情况

3. JavaScriptCore：

   • 实现为JSGlobalObject的子类
   • 优化了模块作用域下的访问路径

常见误区与陷阱

1. 误认为可配置：

   // 以下操作会失败
   delete globalThis
   globalThis = null
   

2. 模块作用域误解：

   // 模块顶层this不等于globalThis
   console.log(this === globalThis) // false
   

3. 与with语句的交互：

   const obj = { x: 1 }
   with(obj) {
     console.log(globalThis.x) // 仍访问全局对象
   }
   

相关提案与未来方向

1. Standard Library提案：

   globalThis.std = {
     array: { ... },
     math: { ... }
   }
   

2. 全局注册表提案：

   globalThis.registry = new FinalizationRegistry(...)
   

3. 跨领域标准化： 讨论如何统一不同iframe和Worker之间的全局访问方式