JavaScript词法环境与变量作用域关系解析

本篇文章给大家分享《JavaScript词法环境与变量环境如何影响作用域？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

词法环境和变量环境是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 的块级作用域语义。关键点在于：

• 函数内部的 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 的绑定。

终于介绍完啦！小伙伴们，这篇关于《JavaScript词法环境与变量作用域关系解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！