变量与词法环境区别详解

本文深入解析了JavaScript中函数执行上下文的关键组成部分：变量环境与词法环境，揭示了它们在作用域管理中的核心区别。变量环境主要负责处理`var`声明和函数声明，在执行上下文创建阶段完成初始化，导致变量提升现象。而词法环境则更关注`let`、`const`声明，以及块级作用域的管理，通过外部环境引用构建作用域链，并为闭包的实现提供了基础。文章详细阐述了词法环境如何实现作用域链，以及它与闭包之间的紧密联系，帮助开发者更好地理解JavaScript的作用域机制和变量查找过程，从而编写出更健壮、可维护的代码。

变量环境主要处理var和函数声明，在执行上下文创建时完成初始化，导致变量提升；词法环境则管理let、const及块级作用域，通过外部环境引用构建作用域链，并支持闭包。

JS函数执行上下文中的变量环境和词法环境，说到底，它们都是执行上下文的内部组件，但各自关注的侧面和行为逻辑有所不同。最核心的区别在于：变量环境（Variable Environment）主要负责处理var声明和函数声明的变量绑定，它的快照在执行上下文创建阶段就基本固定了；而词法环境（Lexical Environment）则是一个更动态、更精确的内部机制，它负责追踪let、const声明的变量，以及更细粒度的作用域链，它的内容在代码执行过程中会根据块级作用域的进入和退出而变化。

解决方案

要理解JS函数执行上下文中的变量环境与词法环境在作用域中的区别，我们得先从执行上下文本身说起。每次当JavaScript代码运行时，无论是全局代码、函数调用还是eval，都会创建一个执行上下文。这个上下文是一个抽象的概念，它包含了当前代码运行所需的所有信息。其中，变量环境和词法环境就是它最重要的两个内部组件，它们共同决定了我们代码中变量和函数的可见性与生命周期。

在我看来，变量环境更像是一个“老派”的记录员，它在函数被调用、执行上下文创建的那一刻，就一股脑地把所有var声明的变量（初始化为undefined）和完整的函数声明（可以直接使用）都记录下来。你可以把它想象成一个初稿，一个大体的框架。它的特点是，一旦创建，就相对稳定，不会随着代码块的进入和退出而频繁变化。这就是为什么var会有“变量提升”的现象，因为它的声明在变量环境里早就被处理了。

而词法环境，则显得更为“现代”和精细。它也有一个“环境记录器”（Environment Record），但这个记录器不仅包含函数参数，更重要的是，它负责管理let和const声明的变量。这些变量在声明前是无法访问的，这就是所谓的“暂时性死区”（Temporal Dead Zone, TDZ）。词法环境的另一个关键部分是它的“外部环境引用”（Outer Environment Reference），这个引用指向了外层（父级）的词法环境，从而构成了我们所说的“作用域链”。每次进入一个新的块级作用域（比如if语句、for循环或简单的{}），都会创建一个新的词法环境，并将其外部环境引用指向当前的词法环境，形成一个临时的链条。当块级作用域执行完毕，这个临时的词法环境就会被销毁，或者说不再活跃。

简单来说，变量环境是执行上下文创建时对var和函数声明的一个初始、粗粒度的扫描和绑定；而词法环境则是代码执行过程中，对所有变量（包括let, const, 函数参数，以及最终也会包含var变量的实际值）和作用域链进行动态、精确管理的核心机制。在ES6之后，随着let和const的引入，词法环境的重要性被大大提升，因为它才是实现块级作用域的真正幕后功臣。

JavaScript中函数执行上下文的创建过程是怎样的？

当我们谈论JavaScript中函数执行上下文的创建，其实是在描述一个分阶段的过程，这并非一蹴而就，而是经过精心设计的。我个人觉得，理解这个过程，能帮助我们更好地把握JS的变量提升、作用域以及闭包等核心概念。

首先，当JavaScript引擎发现一个函数即将被调用时，它会为这个函数创建一个全新的执行上下文。这个创建过程大致可以分为两个阶段：

1. 创建阶段 (Creation Phase)：

   • 确定this绑定（This Binding）：根据函数的调用方式（是作为方法调用、普通函数调用、构造函数调用还是通过call/apply/bind调用），this的值会被确定下来。
   • 创建词法环境组件（LexicalEnvironment Component）：
     • 环境记录器（Environment Record）：这个记录器会扫描函数体内的所有let、const声明的变量和函数声明。对于let和const，它们会被标记为“未初始化”（uninitialized），处于暂时性死区（TDZ），直到实际执行到声明语句时才会被初始化。对于函数声明，它们会被完全地存储在这个记录器中，可以直接使用（这就是函数声明提升）。
     • 外部环境引用（Outer Environment Reference）：这个引用会指向创建当前函数的那个执行上下文的词法环境。这正是作用域链的基础。
   • 创建变量环境组件（VariableEnvironment Component）：
     • 环境记录器（Environment Record）：这个记录器专门处理var声明的变量和函数声明。所有var声明的变量都会被初始化为undefined（这就是var变量提升，但值为undefined），而函数声明则会被完全地存储下来。
     • 外部环境引用（Outer Environment Reference）：在ES6之前，它通常和词法环境的外部环境引用指向同一个地方。在ES6之后，为了兼容var的旧行为，它仍然扮演着一个角色，但最终其内容会与词法环境的环境记录器合并。

2. 执行阶段 (Execution Phase)：

   • 代码开始逐行执行。
   • 在执行过程中，变量的赋值操作会更新词法环境或变量环境中的值。
   • 当遇到let或const的声明语句时，它们会从“未初始化”状态变为实际的值。
   • 如果遇到新的函数调用，会重复上述的创建和执行过程，形成一个执行上下文栈。

值得一提的是，在ES6及以后，最初创建时，词法环境和变量环境的环境记录器内容是有些重叠的。但随着代码的执行，特别是遇到块级作用域，词法环境会变得更加活跃和精细，它会为每个块级作用域创建新的环境记录器，而变量环境则相对保持不变，继续持有var声明的变量。这种分层处理，我觉得是JS引擎为了在引入块级作用域的同时，还能保持对旧var行为的兼容性所做出的巧妙设计。

为什么说变量环境主要处理var和函数声明，而词法环境则更关注let和const？

这个区分是理解JavaScript作用域和变量提升机制的关键所在，我个人觉得，这是ES6对语言核心机制的一次重要重塑。

变量环境（Variable Environment）： 它的核心职责，或者说历史使命，就是处理那些“老旧”的var声明和函数声明。在执行上下文的创建阶段，JavaScript引擎会扫描当前作用域内的所有var声明的变量，并将它们添加到变量环境的环境记录器中，并初始化为undefined。同时，所有函数声明也会被完整地放置在这里，这也就是我们常说的“变量提升”和“函数提升”的根本原因。你可以把它看作是JS在早期版本中，为了实现变量和函数的“预处理”而设立的一个专门区域。它在上下文创建时就完成了大部分工作，后续代码执行时，只是去更新它里面的值。正因为这种“提前处理”的特性，var才没有块级作用域的概念，因为它只关心函数作用域或全局作用域。

function exampleVar() {
  console.log(a); // undefined，因为a被提升了
  var a = 10;
  console.log(a); // 10
}
exampleVar();

在这个例子中，a在exampleVar的变量环境创建时就被添加到其中，并初始化为undefined。

词法环境（Lexical Environment）： 相较于变量环境，词法环境是更现代、更灵活的机制，它主要关注ES6引入的let和const声明。它的环境记录器在执行上下文创建时，也会记录let和const声明的变量，但与var不同的是，它们会被标记为“未初始化”。这意味着在代码执行到声明语句之前，这些变量是不可访问的，试图访问会导致ReferenceError，这就是“暂时性死区”（TDZ）。

function exampleLet() {
  // console.log(b); // ReferenceError: Cannot access 'b' before initialization
  let b = 20;
  console.log(b); // 20
}
exampleLet();

这里的b虽然在词法环境创建时就被记录了，但它处于未初始化状态，直到let b = 20;执行才变得可用。

更重要的是，词法环境是实现块级作用域的基石。每当代码进入一个新的块（{}），例如if语句、for循环、while循环，甚至只是一个独立的块，都会创建一个新的词法环境。这个新的词法环境会将其外部环境引用指向包含它的那个词法环境，形成一个临时的作用域链。当块执行完毕，这个临时的词法环境就会被销毁（或不再活跃），从而实现了let和const的块级作用域特性。

function blockScopeExample() {
  let x = 1;
  if (true) {
    let y = 2; // 新的词法环境被创建，包含y
    console.log(x); // 1 (从外部词法环境获取)
    console.log(y); // 2
  }
  // console.log(y); // ReferenceError: y is not defined (块级作用域结束，y的词法环境被销毁)
}
blockScopeExample();

所以，变量环境可以看作是对var和函数声明的“静态”预处理，而词法环境则是对let、const以及整个作用域链进行“动态”和“精细”管理的核心。它们共同协作，构成了JavaScript复杂而强大的变量查找机制。

词法环境如何实现作用域链，以及它与闭包的关系？

词法环境在JavaScript中扮演着至关重要的角色，它不仅管理着变量的声明和生命周期，更是实现“作用域链”的根本机制。而作用域链，又直接引出了JavaScript中最强大也最容易让人困惑的特性之一——“闭包”。

词法环境如何实现作用域链？

我们知道，每个执行上下文都有一个词法环境，而每个词法环境内部都有一个关键的属性叫做Outer Environment Reference（外部环境引用）。这个引用指向的是创建当前词法环境的那个词法环境。换句话说，它指向了父级作用域的词法环境。

当JavaScript引擎尝试解析一个变量时，它会首先在当前执行上下文的词法环境（也就是当前作用域）中查找。如果找到了，就使用它。如果没找到，它就会沿着Outer Environment Reference向上，去父级词法环境中查找。这个过程会一直持续，直到找到变量或者到达全局词法环境。如果到了全局词法环境仍然没有找到，就会抛出ReferenceError。这个由一系列嵌套的词法环境通过Outer Environment Reference连接起来的链条，就是我们所说的作用域链（Scope Chain）。

let globalVar = 'I am global';

function outerFunction() {
  let outerVar = 'I am outer';

  function innerFunction() {
    let innerVar = 'I am inner';
    console.log(innerVar); // 1. 在innerFunction的词法环境找到
    console.log(outerVar); // 2. innerFunction的Outer Env Ref指向outerFunction的词法环境，在那里找到
    console.log(globalVar); // 3. outerFunction的Outer Env Ref指向全局词法环境，在那里找到
  }

  innerFunction();
}

outerFunction();

在这个例子中，innerFunction的词法环境的Outer Environment Reference指向outerFunction的词法环境，而outerFunction的词法环境的Outer Environment Reference又指向全局词法环境。这构成了一个清晰的作用域链：innerFunction -> outerFunction -> Global。

词法环境与闭包的关系？

闭包，简单来说，就是一个函数能够记住并访问其“外部词法环境”中的变量，即使在其外部函数已经执行完毕并返回之后。而实现这一“记忆”能力的，正是词法环境的Outer Environment Reference。

当一个内部函数被创建时，它不仅仅是创建了一个函数体，更重要的是，它会“捕获”或“记住”其创建时的词法环境。这个被捕获的词法环境，就是内部函数的Outer Environment Reference所指向的那个环境。

function createCounter() {
  let count = 0; // count 存在于 createCounter 的词法环境中

  return function() { // 这是一个内部函数
    count++;        // 它访问了 createCounter 词法环境中的 count
    console.log(count);
  };
}

const counter1 = createCounter(); // createCounter 执行完毕，但其词法环境并未被销毁
counter1(); // 输出 1
counter1(); // 输出 2

const counter2 = createCounter(); // 又创建了一个新的 createCounter 词法环境
counter2(); // 输出 1

在createCounter函数执行完毕后，通常情况下，它的局部变量count应该被垃圾回收。然而，由于createCounter返回的那个匿名内部函数（即counter1和counter2所引用的函数）的Outer Environment Reference仍然指向着createCounter函数执行时创建的那个词法环境，这个词法环境（包括count变量）就不会被垃圾回收机制释放。它被“闭包”在了内部函数中。

所以，词法环境是作用域链的物理实现，而闭包则是词法环境这种机制所带来的一个强大且常见的结果。理解了词法环境如何通过Outer Environment Reference构建作用域链，就能彻底理解闭包的原理和它在JavaScript中实现数据私有化、函数工厂等高级模式的能力。

今天关于《变量与词法环境区别详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！