如何理解javascript的执行上下文_为什么变量提升发生在执行上下文中

夢幻星辰 2025-12-25 00:00:00 次阅读

变量提升是执行上下文创建阶段将声明注册到词法环境或变量环境的结果，var初始化为undefined，函数声明完全绑定，let/const仅注册不初始化致TDZ。

JavaScript 的变量提升（Hoisting）本质上是执行上下文（Execution Context）创建阶段的必然结果，不是语法糖，也不是引擎“把代码往上挪”——而是变量和函数声明在进入执行上下文时，被预先注册到其词法环境（Lexical Environment）中，但初始化时机不同。

执行上下文是什么

每次 JavaScript 运行一段可执行代码（全局代码、函数调用、eval），都会创建一个执行上下文。它是 JS 引擎用来管理变量、函数、this 和作用域的运行时容器。每个上下文分两个阶段：创建阶段（Creation Phase）和执行阶段（Execution Phase）。

创建阶段会做三件事：

初始化词法环境（LexicalEnvironment），用于存储 let/const 声明（暂存死区 TDZ）和函数声明
初始化变量环境（VariableEnvironment），专门处理 var 声明（含初始化为 undefined）
确定 this 值和作用域链

变量提升为什么只对 var/func 有效，而 let/const 不“提升值”

关键区别在于“注册”和“初始化”的分离程度：

var 声明：在创建阶段，变量名被加入 VariableEnvironment，同时被初始化为 undefined → 所以能访问，值是 undefined
函数声明：在创建阶段，函数名和整个函数体都被完整绑定到 LexicalEnvironment → 所以可以提前调用
let/const 声明：在创建阶段，变量名也被注册进 LexicalEnvironment，但不初始化，直到执行阶段真正遇到该语句才赋值 → 在赋值前访问就报 ReferenceError（TDZ）

一个例子看清楚两阶段差异

代码：

console.log(a); // undefined（var 提升 + 初始化）
console.log(b); // ReferenceError（let 未初始化，处于 TDZ）
console.log(foo()); // "ok"（函数声明提升并初始化）

var a = 1;
let b = 2;
function foo() { return "ok"; }

执行过程：

创建阶段：a 被加入 VariableEnvironment 并设为 undefined；foo 被完整绑定；b 名字被登记但无值
执行阶段：逐行执行，遇到 console.log(a) 时 a 已存在（undefined）；遇到 console.log(b) 时 b 在 TDZ 中，禁止读取