Quartz 4

变量环境

5 min read

用日常生活比喻来理解 JavaScript 的 变量环境（Variable Environment），就像你进厨房做菜时，眼前摆着所有食材和工具的「操作台」一样。它是 JavaScript 代码运行时最直接的「数据空间」。

想象你正在厨房做菜：

  1. 厨房 = 执行上下文
    整个厨房代表一个执行上下文（比如函数调用时创建的上下文），它是你做菜的工作环境。

  2. 操作台 = 变量环境
    操作台上摆着你当前需要的所有食材（变量）和工具（函数）：

    • var 声明的变量就像提前摆好的食材（即使还没切菜，食材盒子已经放在台面上，只是空的）。
    • 函数声明像一把已经组装好的刀（直接可用）。
    • 这个操作台的内容在「进厨房时就固定了」（编译时确定结构，运行时填充值）。

  3. 隐藏的储物柜 = 词法环境（Lexical Environment）
    厨房墙上可能有隐藏柜子，存放 let/const 声明的块级变量（比如调料罐）。

    • 这些柜子只有走到特定区域（代码块）才能打开（块级作用域）。
    • 如果没走到对应区域就伸手拿，会触发错误（暂时性死区）。

技术原理拆解

1. 变量环境是什么？

  • 定义：变量环境是执行上下文（Execution Context）的一部分，专门存储 var 声明的变量和函数声明。
  • 特点：
    • 变量提升：var 变量在编译阶段被「提前声明」并初始化为 undefined。
    • 函数优先：函数声明整体提升，优先级高于变量声明。
    • 全局唯一：在同一个执行上下文中，变量环境是唯一的（不像词法环境可能有多个）。

2. 变量环境 vs. 词法环境

对比项变量环境（Variable Environment）词法环境（Lexical Environment）
存储内容var 变量、函数声明let/const 变量、块级作用域变量
作用域类型函数作用域块级作用域
提升行为变量提升（初始化为 undefined）无提升（存在暂时性死区 TDZ）
环境数量每个执行上下文一个变量环境可能嵌套多个词法环境（如代码块、函数嵌套）

3. 底层行为示例

function cook() {
  console.log(vegetable); // undefined（变量提升）
  var vegetable = "tomato"; // 存储在变量环境
 
  if (true) {
    let tool = "knife"; // 存储在词法环境（块级作用域）
    console.log(tool); // "knife"
  }
  console.log(tool); // 报错（tool 不在变量环境）
}
cook();

执行过程：

  1. 编译阶段：

    • 创建变量环境，存入 vegetable（初始化为 undefined）和函数声明。
    • 分析 if 块，创建嵌套的词法环境用于存储 tool。

  2. 执行阶段：

    • 执行 console.log(vegetable) 时，从变量环境找到 vegetable（值为 undefined）。
    • 执行 var vegetable = "tomato"，修改变量环境中的值。
    • 进入 if 块时，访问词法环境中的 tool；离开块后，词法环境被销毁。

关联核心机制

  1. 闭包：
    外层函数的变量环境会被内层函数保留（即使外层函数已执行完毕），形成闭包。

    function kitchen() {
  var ingredient = "salt";
  return function cook() {
    console.log(ingredient); // 访问外层变量环境
  };
}
const fn = kitchen();
fn(); // "salt"

  2. 作用域链：
    变量查找时，先查当前词法环境 → 外层词法环境 → 最后到变量环境。

  3. 内存管理：
    变量环境中的变量可能因闭包导致无法回收（内存泄漏）。

总结

  • 变量环境是执行上下文的「基础工作台」，管理 var 和函数声明。
  • 词法环境是「动态储物柜」，管理 let/const 和块级作用域。
  • 二者共同构成 JavaScript 的作用域体系，理解它们能彻底解决变量提升、闭包、作用域链等问题。

Graph View

Backlinks