词法环境与提升机制

难度：⭐⭐ | 预计阅读时间：18 分钟 | ECMAScript 2024

词法环境（Lexical Environment）是 JavaScript 引擎管理变量可见性和作用域链的核心数据结构。提升（Hoisting）并非代码的物理移动，而是变量和函数声明在编译阶段被注册到词法环境记录中的结果。理解这一机制对于排查 undefined、ReferenceError 以及 TDZ（暂时性死区）问题至关重要。

---

目录

1. 词法环境的结构定义
2. 环境记录的三种类型
3. 提升的本质：编译阶段的声明注册
4. var、let、const 的提升差异
5. 函数声明 vs 函数表达式提升
6. 暂时性死区 (TDZ) 深度解析
7. 块级作用域与循环变量
8. 实战案例
9. 深度追问
10. 总结表格

---

1. 词法环境的结构定义

根据 ECMAScript 规范（§9.1），每个词法环境由两部分组成：

// 概念模型（非实际代码）
LexicalEnvironment = {
  EnvironmentRecord: { /* 绑定标识符 → 值的映射 */ },
  OuterReference: null | LexicalEnvironment  // 外部词法环境引用
}

V8 实现细节：V8 中词法环境被实现为 Context 对象，通过链表形式连接父级上下文。在优化编译（TurboFan）阶段，如果闭包未逃逸，V8 会将变量直接分配在栈上而非堆中。

代码示例 1：词法环境的创建

function outer() {
  let x = 10;        // outer 的 DeclarativeEnvironmentRecord
  
  function inner() {
    let y = 20;      // inner 的 DeclarativeEnvironmentRecord
    console.log(x + y); // 通过 OuterReference 查找 x
  }
  
  inner();
}
outer(); // 30

执行过程：

1. 全局执行上下文创建 → 全局词法环境
2. outer() 调用 → 创建 outer 的词法环境，OuterReference 指向全局
3. inner() 调用 → 创建 inner 的词法环境，OuterReference 指向 outer

---

2. 环境记录的三种类型

2.1 声明式环境记录 (Declarative Environment Record)

用于函数声明、变量声明、catch 子句等：

function demo() {
  var a = 1;     // 注册到 VariableEnvironment
  let b = 2;     // 注册到 LexicalEnvironment
  const c = 3;   // 注册到 LexicalEnvironment
  function d() {} // 注册到 VariableEnvironment（函数声明提升）
}

2.2 对象式环境记录 (Object Environment Record)

用于 with 语句和全局对象绑定：

// 全局 var 声明会成为 globalThis 的属性
var globalVar = 'hello';
console.log(globalThis.globalVar); // 'hello'

// let/const 不会
let globalLet = 'world';
console.log(globalThis.globalLet); // undefined

2.3 全局环境记录 (Global Environment Record)

混合了声明式和对象式：

// 代码示例 2：全局环境记录的双重性
var x = 1;
let y = 2;

console.log(Object.getOwnPropertyDescriptor(globalThis, 'x'));
// { value: 1, writable: true, enumerable: true, configurable: false }

console.log(Object.getOwnPropertyDescriptor(globalThis, 'y'));
// undefined — let 绑定在声明式记录中

---

3. 提升的本质：编译阶段的声明注册

关键认知：JavaScript 代码执行分为两个阶段：

1. 编译阶段（Creation Phase）：解析代码，注册声明
2. 执行阶段（Execution Phase）：逐行执行代码

// 代码示例 3：提升的真相
console.log(a); // undefined（已注册，值为 undefined）
console.log(b); // ReferenceError: Cannot access 'b' before initialization
var a = 1;
let b = 2;

V8 字节码验证：

# 使用 Node.js 查看字节码
node --print-bytecode --print-bytecode-filter=test test.js

function test() {
  console.log(x);
  var x = 5;
}
// 字节码中会看到 LdaUndefined 在函数入口处
// 而非 x = 5 被"移动"到顶部

---

4. var、let、const 的提升差异

// 代码示例 4：三种声明的完整对比
function hoistingDemo() {
  // === 编译阶段 ===
  // var v → 注册并初始化为 undefined
  // let l → 注册但不初始化（进入 TDZ）
  // const c → 注册但不初始化（进入 TDZ）
  // function fn → 注册并初始化为函数对象
  
  console.log(v);   // undefined
  console.log(fn);  // [Function: fn]
  // console.log(l); // ReferenceError（TDZ）
  // console.log(c); // ReferenceError（TDZ）
  
  var v = 1;
  let l = 2;
  const c = 3;
  function fn() { return 'hello'; }
  
  console.log(v);  // 1
  console.log(l);  // 2
  console.log(c);  // 3
}

---

5. 函数声明 vs 函数表达式提升

// 代码示例 5：函数声明完全提升
sayHello(); // "Hello!" — 正常执行
sayBye();   // TypeError: sayBye is not a function

function sayHello() {
  console.log("Hello!");
}

var sayBye = function() {
  console.log("Bye!");
};

条件声明的浏览器差异

// 代码示例 6：条件中的函数声明（严格模式 vs 非严格模式）
// ⚠️ 不同引擎行为不同！

// 非严格模式下（Annex B 兼容）
if (true) {
  function foo() { return 'block'; }
}
console.log(foo()); // V8: 'block', 但规范上是 undefined

// 严格模式下
'use strict';
if (true) {
  function bar() { return 'block'; }
}
// console.log(bar()); // ReferenceError — 块级作用域

浏览器差异：

• V8 (Chrome/Node.js)：非严格模式下，条件内的函数声明会提升到函数/全局作用域
• SpiderMonkey (Firefox)：遵循相同的 Annex B 语义，但历史版本曾有差异
• 严格模式：所有引擎统一为块级作用域

---

6. 暂时性死区 (TDZ) 深度解析

TDZ 是从块作用域顶部到变量声明语句之间的区域：

// 代码示例 7：TDZ 的精确边界
{
  // ← TDZ 开始
  console.log(typeof x); // ReferenceError！
  // 注意：typeof 对未声明的变量返回 "undefined"
  // 但对 TDZ 中的变量仍然抛错
  
  let x = 42; // ← TDZ 结束
  console.log(typeof x); // "number"
}

// 对比未声明变量
console.log(typeof undeclared); // "undefined"（不报错）

TDZ 的性能影响

// V8 中 TDZ 检查的开销
function tdzPerf() {
  let sum = 0;
  for (let i = 0; i < 1000000; i++) {
    sum += i; // 每次访问 i 都有 TDZ 检查（V8 会在优化时消除）
  }
  return sum;
}

V8 优化：TurboFan 编译器在确认变量已初始化后，会消除后续的 TDZ 检查。这意味着在热循环中，let 和 var 性能差异可以忽略不计。

---

7. 块级作用域与循环变量

// 代码示例 8：经典闭包问题
// var 版本 — 所有回调共享同一变量
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 3, 3, 3
}

// let 版本 — 每次迭代创建新的词法环境
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 0, 1, 2
}

规范解读（§14.7.4.2）：for (let ...) 循环的每次迭代都会创建一个新的词法环境，将上一次迭代的绑定值复制到新环境中。这不仅仅是语法糖，而是规范层面的语义。

---

8. 实战案例

实战案例 1：模块初始化顺序陷阱

// moduleA.js
import { getValue } from './moduleB.js';

console.log(getValue()); // 运行时 getValue 已定义，但内部变量可能未初始化

export const config = { debug: true };

// moduleB.js
import { config } from './moduleA.js';

let internalState = null; // 模块求值时才初始化

export function getValue() {
  // 如果 moduleA 在模块求值完成前调用，internalState 为 null
  return internalState || initState();
}

function initState() {
  internalState = config ? 'debug' : 'production';
  return internalState;
}

实战案例 2：Class 字段的 TDZ

class Example {
  // 实例字段按声明顺序初始化
  a = this.b; // undefined！b 还未初始化
  b = 42;
  
  constructor() {
    console.log(this.a); // undefined
    console.log(this.b); // 42
  }
}

new Example();

实战案例 3：switch 语句的作用域陷阱

function processCommand(cmd) {
  switch (cmd) {
    case 'start':
      let result = startProcess(); // ⚠️
      break;
    case 'stop':
      let result = stopProcess(); // SyntaxError: 重复声明
      break;
  }
}

// 修复：每个 case 使用块
function processCommandFixed(cmd) {
  switch (cmd) {
    case 'start': {
      let result = startProcess();
      break;
    }
    case 'stop': {
      let result = stopProcess();
      break;
    }
  }
}

---

9. 深度追问

Q1：为什么 typeof 不能安全检测 TDZ 中的变量？

因为 ECMAScript 规范明确规定：对未初始化的绑定执行 GetValue 操作时，必须抛出 ReferenceError。typeof 的特殊处理仅适用于"不可解析的引用"（即从未声明的标识符），而非 TDZ 中的绑定。

Q2：var 在 ES6+ 中还有使用场景吗？

在模块顶层和函数内部，var 已经没有技术优势。唯一的边缘场景是需要利用 var 的函数作用域特性（如 eval 动态注入），但这本身也是反模式。

Q3：词法环境何时被 GC 回收？

当没有任何闭包引用某个词法环境时，它就可以被回收。V8 的隐藏类（Hidden Class）系统和逃逸分析会优化这一过程——如果编译器能证明闭包不会逃逸，变量甚至不会分配到堆上。

---

10. 总结表格

特性	var	let	const	function
提升	✅ 提升并初始化为 undefined	✅ 提升但不初始化	✅ 提升但不初始化	✅ 提升并初始化为函数体
TDZ	❌	✅	✅	❌
块级作用域	❌ 函数/全局作用域	✅	✅	✅（严格模式）
重复声明	✅ 允许	❌ SyntaxError	❌ SyntaxError	✅ 允许（覆盖）
全局属性	✅ globalThis.x	❌	❌	✅
循环迭代绑定	❌ 共享	✅ 每次新建	✅ 每次新建	N/A

---

下一篇：03. This 绑定规则与硬绑定实现