词法环境和变量环境是JS执行上下文中真实存在的数据结构,前者记录标识符映射并含外部引用链实现词法作用域,后者专为var/函数声明设计以支持变量提升;let/const仅进入词法环境且受TDZ约束,var则同时进入两者并初始化为undefined。

JavaScript 中的词法环境(Lexical Environment)和变量环境(Variable Environment)是理解作用域、变量提升(hoisting)、let/const 与 var 行为差异的核心机制。它们不是抽象概念,而是真实存在的、在执行上下文(Execution Context)中被引擎维护的数据结构。
词法环境:记录标识符与值的映射关系
词法环境是一个包含两个部分的对象:
-
环境记录(Environment Record):实际存储变量、函数、参数等绑定的地方(比如
var a = 1、function foo(){}); - 外部环境引用(Outer Lexical Environment):指向其外层词法环境的指针,形成链式结构(即“词法环境链”)。
这个链决定了变量查找规则:当访问一个变量时,JS 引擎先在当前词法环境的环境记录中找,找不到就顺着 outer 向上查找,直到全局环境。这就是“词法作用域”的底层实现——作用域在代码写完时就已由嵌套结构决定,与调用位置无关。
变量环境:专门处理 var 声明和函数声明的“旧式”环境
变量环境本质上是词法环境的一个特殊实例,它在 ES6+ 中被明确区分出来,主要为了支持 let/const 的块级作用域语义。关键点在于:
立即学习“Java免费学习笔记(深入)”;
- 函数内部的
var声明和函数声明,会同时进入变量环境和词法环境(早期行为兼容); - 而
let/const声明只进入词法环境,不进变量环境; - 变量环境在函数执行开始前就被初始化(所以
var可以被提前访问,值为undefined); - 词法环境中的
let/const绑定则处于“暂时性死区”(TDZ),在声明语句执行前不可访问。
两者如何协同影响作用域行为
以一个函数执行为例:
function foo() {
console.log(a); // undefined(var 提升,已初始化)
console.log(b); // ReferenceError(b 在 TDZ 中)
var a = 1;
let b = 2;
}
此时:
- 变量环境(VariableEnvironment)中已有
a: undefined(由var声明创建); - 词法环境(LexicalEnvironment)中也有
a: undefined,但还没有b的条目; - 当执行到
let b = 2,词法环境才创建b绑定,并设为未初始化状态(TDZ);赋值后才变为2; - 函数内部的任何变量访问,都优先查词法环境;若没找到,再沿 outer 查;但
var和let的绑定时机不同,导致行为差异。
块级作用域(如 if、for)中的体现
ES6 引入块级作用域后,每个块({...})都会创建一个新的词法环境(但不会创建新的变量环境):
-
var声明仍绑定到函数级变量环境,因此不受块限制; -
let/const声明绑定到该块对应的词法环境,且该环境的outer指向外层函数或全局环境; - 这意味着循环中用
let声明的变量,每次迭代都会生成独立的词法环境绑定(解决经典闭包问题)。
例如:for (let i = 0; i console.log(i), 0) 输出 0, 1, 2,正是因为每次循环都新建了词法环境,保存了各自 i 的绑定。










