10分钟彻底搞懂 window 对象、全局环境与 JS 引擎

10分钟彻底搞懂 `window` 对象、全局环境与 JS 引擎

你每天都在用 console.log、setTimeout、alert，但你知道它们本质上都是 window 的方法吗？

为什么 var a = 1 可以通过 window.a 访问，而 let b = 2 不行？
window 真的是一个 JavaScript 对象吗？它和 JS 引擎是什么关系？

本文从 ECMAScript 规范到浏览器实现，带你一步步走进 window 背后的设计哲学。

1. 先看一个代码片段：`var` 和 `let` 的不同命运

js 复制代码

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

现象：var 声明的全局变量成为了 window 的属性，而 let 没有。

为什么会这样？答案藏在 ECMAScript 的"全局环境"设计中。

2. JS 引擎是什么？

在理解 window 之前，先要清楚 JS 引擎 的角色。

JS 引擎是浏览器（或 Node.js）中的一个核心组件，负责解析、编译和执行 JavaScript 代码。它严格遵循 ECMAScript 规范，处理语法、类型、作用域、执行栈、垃圾回收等语言核心部分。

常见的 JS 引擎：

V8（Chrome、Edge、Node.js）
SpiderMonkey（Firefox）
JavaScriptCore（Safari）

重要：JS 引擎本身不提供 console、setTimeout、document、window 等 API。这些是宿主环境（浏览器）额外注入的。引擎只负责执行你写的 JS 代码，而代码中调用的 window.alert 实际上是去调用宿主提供的功能。

3. `window` 对象真的是 JavaScript 对象吗？

是的，在 JavaScript 中它就是一个普通对象，你可以像操作普通对象一样操作它：

js 复制代码

window.myProp = 'hello';
console.log(window.myProp); // 'hello'
delete window.myProp;

typeof window 返回 "object"，window instanceof Window 为 true，它的原型链最终指向 Object.prototype。

特殊之处：

它是 JS 引擎启动时，由浏览器使用 C++ 创建并注入到 JavaScript 环境中的，不是 new Window() 构造出来的。
它同时扮演两个角色：
- ECMAScript 定义的"全局对象" （存储 Object、Array、parseInt 等内置内容）。
- BOM（浏览器对象模型）的核心（提供窗口控制、视口信息、历史、定时器等）。

4. ECMAScript 为什么要求"全局对象"？

ECMAScript 规范规定：每个宿主环境必须提供一个全局对象 ，并且所有内置构造器（Object、Array、Function）和全局函数（parseInt、isNaN）都应该是该对象的属性。

为什么这样设计？

统一命名空间：避免成千上万的标识符直接暴露在顶层，减少命名冲突。
宿主 API 挂载点 ：浏览器可以将 alert、setTimeout 等挂在全局对象上，Node.js 则可以挂 global.require。
支持动态特性 ：你可以通过 globalThis.parseInt = myParse 替换内置函数，或者用 'fetch' in globalThis 检测 API 支持。
简化引擎实现：作用域链的最外层就是一个全局对象引用，查找标识符时直接到该对象上取属性即可。
历史与易用性：从语言诞生起，就是为了让脚本能方便地调用宿主能力，无需导入模块。

因此，浏览器将 window 作为全局对象，Node.js 将 global 作为全局对象。

5. 为什么浏览器要把 `window` 设计成"顶层对象"？

统一接口 ：所有与浏览器交互的 API（窗口尺寸、滚动、定时器、存储）都挂在 window 上，开发者在任何地方都可以直接调用。
动态环境检测 ：通过 if (window.fetch) 判断功能是否可用，并动态补充 polyfill。
调试友好 ：在控制台输入 window，即可看到所有全局 API 和变量。
隐式访问简化开发 ：因为作用域链会自动向上找到 window，所以你可以直接写 alert() 而不是 window.alert()。
与 ECMAScript 规范对接 ：window 正好充当了规范要求的"全局对象"，内置构造器自然成为其属性。

6. `globalThis`：跨环境的统一全局对象

长期以来，浏览器用 window，Web Worker 用 self，Node.js 用 global。为了跨平台代码方便，ES2020 引入了 globalThis。

js 复制代码

// 在任何 JS 环境中，globalThis 都指向当前环境的全局对象
console.log(globalThis === window);  // 浏览器中 true
console.log(globalThis === global);  // Node.js 中 true
console.log(globalThis === self);    // Worker 中 true

使用场景：当你写一个通用库或同构应用时，不需要再写：

js 复制代码

const globalObj = typeof window !== 'undefined' ? window : global;

直接使用 globalThis 即可。

7. 同构 JavaScript：什么样的代码既要在浏览器运行，又要在 Node.js 运行？

JavaScript 是唯一一种能同时在浏览器和 Node.js 中运行的语言（因为两者都遵循 ECMAScript 标准）。但浏览器和 Node.js 提供的宿主 API不同：

环境	宿主 API 例子
浏览器	`window`、`document`、`localStorage`、`fetch`
Node.js	`global`、`fs`、`path`、`process`、`http`

可以跨环境运行的代码：

纯逻辑代码：如算法库 lodash、日期处理、数学计算。
通过环境判断适配的代码 ：例如 Axios 在浏览器使用 XHR，在 Node.js 使用 http 模块。
使用抽象层 ：比如通用的 globalThis 访问全局对象，或使用打包工具（Webpack、Vite）的 polyfill。

典型场景：

同构应用（SSR）：React/Vue 组件在服务端渲染为 HTML，在客户端再激活为交互应用。
工具库 ：如 vite.config.js 在 Node 中运行，但最终产物运行在浏览器。
测试框架：Jest 可以在 Node 中测试 DOM 相关的代码（模拟浏览器环境）。

8. 总结与启示

问题	答案
JS 引擎做什么？	执行 JS 代码，但不管浏览器 API。
`window` 是 JS 对象吗？	是，由宿主创建，但在 JS 中就是普通对象。
为何 `var` 会成为 `window` 属性？	ECMAScript 的全局环境记录分"对象环境"（`var`）和"声明性环境"（`let/const`）。
为什么要有全局对象？	统一命名空间、支持宿主注入 API、动态特性、简化引擎、历史原因。
`globalThis` 是什么？	跨环境的统一全局对象，代替 `window`/`global`/`self`。
同构代码是什么？	同时运行在浏览器和 Node.js 的 JS 逻辑，依赖抽象或环境判断。

一句话 ：window 是浏览器给 JS 引擎的"全局容器"，ECMAScript 利用它实现了灵活、可扩展的语言环境。理解这个容器，你就掌握了前端 JS 运行底层的一半秘密。

10分钟彻底搞懂 window 对象、全局环境与 JS 引擎