❓ 什么是宿主环境？
- 定义：JavaScript 引擎（如 V8）的“生存空间”，提供 API 和运行支持。
- 类比：JavaScript 引擎是汽车发动机，宿主环境是整辆车（决定发动机装在哪里：赛车、卡车，还是潜艇？）。
🚀 JS 的“跨界”本质
- 语言标准化（ECMAScript） → 代码一致性。
- 引擎可嵌入性（V8 等） → 运行环境无关性。
- API 分层扩展 → 能力按需注入。
- 事件循环模型 → 统一异步编程体验。
- 动态类型 + 原型链 → 高度灵活。
这些特性使 JavaScript 成为“寄生语言”，能灵活依附于任何提供引擎和 API 的宿主环境，实现真正的 “Write Once, Run Anywhere” （一处编写，多端运行）。
🎯 核心设计差异对比
| 宿主环境 | 核心设计哲学 | 典型应用场景 | 对开发者的影响 |
|---|
| 浏览器 | “交互优先” ： 支持动态网页交互，注重 DOM 操作、事件驱动和 UI 响应。 | 网页应用、SPA、在线工具 | 需关注 DOM 性能、避免全局污染、处理跨浏览器兼容性。 |
| Node.js | “I/O 高效” ： 非阻塞异步模型，专注高并发服务端和工具链开发。 | API 服务、CLI 工具、微服务 | 需熟悉异步编程（Promise/async）、模块化设计、内存管理。 |
| Electron | “混合双打” ： 融合浏览器 UI 和 Node.js 系统能力，实现跨平台桌面应用。 | 桌面应用（如 VSCode、Slack） | 需区分主进程（Node.js）和渲染进程（浏览器），防范安全风险（如 IPC 通信）。 |
| React Native | “原生体验” ： 用 JS 编写，渲染为原生组件，平衡开发效率与性能。 | 移动应用（iOS/Android） | 需学习桥接（Bridge）机制、处理平台差异、优化渲染性能。 |
🌍 全局对象对比
| 宿主环境 | 全局对象 | 特有属性/API |
|---|
| 浏览器 | window | document, location, localStorage |
| Node.js | global | process, Buffer, __dirname |
| Electron | window（渲染进程） + global（主进程） | ipcRenderer（渲染进程）, ipcMain（主进程） |
| React Native | global | ReactNative, Platform, NativeModules |
🌟 全局作用域对比
| 宿主环境 | 全局作用域特性 | 变量污染风险 |
|---|
| 浏览器 | 所有 <script> 共享同一个全局作用域 | 高（var 污染 window） |
| Node.js | 模块作用域隔离，不污染 global | 低（模块内 var 不挂载到全局） |
| Electron | 渲染进程同浏览器，主进程同 Node.js | 渲染进程高，主进程低 |
| React Native | 模块作用域隔离，类似 Node.js | 低 |
🔄 全局执行上下文对比
| 宿主环境 | 执行上下文创建规则 | 作用域链管理 |
|---|
| 浏览器 | 每个 <script> 创建全局执行上下文 | 函数作用域 + 块级作用域（ES6） |
| Node.js | 每个模块包裹为函数，创建独立上下文 | 模块作用域 + 闭包链 |
| Electron | 主进程同 Node.js，渲染进程同浏览器 | 主进程模块化，渲染进程混合作用域 |
| React Native | 模块化加载，类似 Node.js | 模块作用域 + 闭包（通过 Metro Bundler） |
📦 变量环境（Variable Environment）
| 宿主环境 | 变量环境特性 | 示例 |
|---|
| 浏览器 | var 变量提升，挂载到 window | var a = 1; console.log(window.a); // 1 |
| Node.js | var 提升到模块作用域，不挂载到全局 | var a = 1; console.log(global.a); // undefined |
| Electron | 渲染进程同浏览器，主进程同 Node.js | 主进程：var 不污染全局 |
| React Native | var 提升到模块作用域 | 同 Node.js |
🔒 词法环境（Lexical Environment）
| 宿主环境 | 词法环境特性 | 块级作用域支持 |
|---|
| 浏览器 | 支持 let/const，TDZ（暂时性死区） | 是（ES6+） |
| Node.js | 同浏览器，严格模式默认启用 | 是 |
| Electron | 同浏览器（渲染进程） | 是 |
| React Native | 同 Node.js | 是 |
🎯 this 指向对比
| 宿主环境 | 全局 this | 函数 this（非严格模式） |
|---|
| 浏览器 | window | 默认指向 window |
| Node.js | 模块顶层 this → module.exports | 默认指向 global |
| Electron | 渲染进程同浏览器，主进程同 Node.js | 主进程函数默认指向 global |
| React Native | 模块顶层 this → undefined（严格模式） | 默认指向 undefined（严格模式） |
🚨 开发注意事项
- 浏览器：慎用
var，避免污染 window；注意事件回调中的 this（如 addEventListener）。
- Node.js：模块化编程，避免修改
global；使用 strict mode 规范 this。
- Electron：区分主进程和渲染进程的全局对象，避免跨进程变量泄漏。
- React Native：使用
import/export 管理模块，箭头函数绑定 this。
