js中的globalThis 和 window：跨环境访问全局对象

评论
164 views

在JavaScript的世界里，访问全局对象看似简单，实则暗藏玄机。本文将带你深入探索globalThis与window的奥秘，助你写出真正跨平台的JavaScript代码！

全局对象的重要性

在JavaScript中，全局对象是程序的核心枢纽，包含了所有全局变量和函数。但问题在于：不同JavaScript运行环境的全局对象名称各不相同！

// 浏览器中
console.log(window === this); // true（在全局作用域中）

// Node.js中
console.log(global === this); // true（在模块顶层作用域中）

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

这种差异性给跨环境开发带来了巨大挑战。直到ES2020引入了globalThis，才真正解决了这个问题。

window：浏览器环境的王者

在浏览器环境中，window对象代表当前浏览器窗口，它同时作为全局对象存在：

// 在浏览器中
window.setTimeout(() => {
  console.log("使用window访问setTimeout");
}, 100);

// 全局变量会自动成为window的属性
var globalVar = "我是全局变量";
console.log(window.globalVar); // "我是全局变量"

使用范围

window：

  • 仅适用于浏览器环境
  • （如 Chrome、Firefox 等）。
  • 在 Node.js、Web Workers、Service Workers 等非浏览器环境中，window 不存在，直接使用会报错。

globalThis：

  • 浏览器环境（globalThis === window）。
  • Node.js 环境（globalThis === global）。
  • Web Workers（globalThis === self）。
  • Service Workers（globalThis === self）。
  • 通用全局对象，支持所有 JavaScript 运行环境：

历史背景

window：

  • 早期浏览器环境中为全局对象引入的术语，如 IE 4（1997 年）就已支持。
  • 受限于浏览器环境，缺乏跨平台的统一标准。

globalThis：

  • ES2020 标准
  • 正式引入，作为统一的全局对象引用。
  • 解决了不同环境下全局对象名称不一致的问题（如浏览器 window、Node.js global、Web Workers self）。

兼容性

window：

  • 浏览器兼容性极佳（IE 9+），但非浏览器环境完全不可用。

globalThis：

  • 现代浏览器（Chrome 71+、Firefox 65+、Safari 12.1+）和 Node.js 12+ 已支持。
  • 旧环境（如 IE）需通过 polyfill 兼容

实际应用建议

优先使用 globalThis：

  • 编写跨平台代码（如库、工具函数）时，确保在浏览器、Node.js、Web Workers 中均可运行。
  • 避免对全局对象名称的硬编码依赖。

仅在浏览器专用代码中使用 window：

  • 如 DOM 操作、浏览器 API 调用（window.document、window.fetch）。