let 与 const 的块级作用域原理：词法环境（Lexical Environment）栈的实现

理解块级作用域

ES6 引入的 let 和 const 关键字提供了真正的块级作用域支持，这是对 JavaScript 作用域系统的重要改进。

块级作用域的基本概念

{
  let x = 1;
  const y = 2;
  var z = 3;
  
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}

console.log(z); // 3 (var 具有函数作用域)
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

块级作用域的应用场景

// 在循环中创建独立的作用域
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2
  }, 100);
}

// 在条件语句中
if (true) {
  const message = "Hello";
  let count = 0;
  // message 和 count 只在这个块中有效
}
// console.log(message); // ReferenceError

词法环境（Lexical Environment）的概念

词法环境是 JavaScript 引擎用来管理标识符和变量绑定的内部机制。每个执行上下文都有一个关联的词法环境。

词法环境的组成

词法环境由两部分组成：

1. 环境记录（Environment Record）：存储标识符和变量绑定的实际位置
2. 对外部环境的引用：指向包含该词法环境的外部词法环境

// 示例：词法环境的层次结构
function outer() {
  const outerVar = "I'm outer";
  
  function inner() {
    const innerVar = "I'm inner";
    console.log(outerVar); // 可以访问外部环境的变量
    console.log(innerVar); // 可以访问当前环境的变量
  }
  
  inner();
  // console.log(innerVar); // 无法访问内部环境的变量
}

词法环境栈的实现机制

当代码执行时，JavaScript 引擎会维护一个词法环境栈，随着函数调用和块级作用域的进入和退出而变化。

执行上下文和词法环境栈

// 全局词法环境
const globalVar = "I'm global";

function level1() {
  // level1 的词法环境（包含对全局环境的引用）
  const var1 = "I'm level 1";
  
  {
    // 块级词法环境（包含对 level1 环境的引用）
    const blockVar = "I'm in block";
    console.log(globalVar); // 通过词法环境链访问全局变量
    console.log(var1);      // 通过词法环境链访问上级变量
    console.log(blockVar);  // 访问当前环境的变量
  }
  
  // blockVar 在这里不可访问
  // console.log(blockVar); // ReferenceError
}

level1();

词法环境的创建和销毁

function demonstrateLexicalEnvironment() {
  console.log("进入函数作用域");
  // 创建函数的词法环境
  
  {
    console.log("进入块级作用域");
    // 创建块级词法环境
    let blockScoped = "block";
    const blockConst = "const block";
    console.log(blockScoped, blockConst);
    // 块级作用域结束，词法环境被销毁
  }
  
  console.log("离开块级作用域");
  // blockScoped 和 blockConst 在这里不可访问
  
  if (true) {
    console.log("进入条件块作用域");
    // 创建新的块级词法环境
    let conditionVar = "condition";
    console.log(conditionVar);
    // 条件块作用域结束，词法环境被销毁
  }
  
  // conditionVar 在这里不可访问
  // console.log(conditionVar); // ReferenceError
}

demonstrateLexicalEnvironment();

环境记录的类型

JavaScript 中有两种主要的环境记录类型：

声明式环境记录（Declarative Environment Record）

用于存储变量、常量、函数声明等：

function example() {
  let x = 1;
  const y = 2;
  function inner() {}
  
  // 这些绑定存储在声明式环境记录中
}

对象环境记录（Object Environment Record）

主要用于全局执行上下文，将绑定存储在对象（通常是全局对象）中：

// 全局环境使用对象环境记录
var globalVar = "global"; // 成为全局对象的属性
let globalLet = "global let"; // 不成为全局对象的属性

console.log(globalThis.globalVar); // "global"
console.log(globalThis.globalLet); // undefined

块级作用域的实际应用

循环中的独立作用域

// 每次迭代都创建新的词法环境
const functions = [];
for (let i = 0; i < 3; i++) {
  functions[i] = function() {
    return i; // 每个函数捕获各自迭代中的 i 值
  };
}

console.log(functions[0]()); // 0
console.log(functions[1]()); // 1
console.log(functions[2]()); // 2

模块模式的实现

// 利用块级作用域实现模块模式
{
  // 私有变量和函数
  let privateCounter = 0;
  
  function privateFunction() {
    privateCounter++;
  }
  
  // 公共接口
  window.myModule = {
    increment() {
      privateFunction();
    },
    
    getCount() {
      return privateCounter;
    }
  };
}

// privateCounter 和 privateFunction 在外部不可访问
myModule.increment();
console.log(myModule.getCount()); // 1

总结

ES6 的 let 和 const 通过引入块级作用域，解决了 var 带来的许多问题。其背后是词法环境机制的实现，JavaScript 引擎通过维护词法环境栈来管理不同作用域中的变量绑定。理解这一机制有助于我们更好地使用 ES6 的块级作用域特性，编写更安全、更可预测的代码。