JavaScript中的变量声明：var、let、const的区别与底层原理

描述
在JavaScript中，变量声明有三种方式：var、let和const。它们涉及作用域、提升、重复声明和可变性等核心概念，理解其区别和底层机制对编写可靠代码至关重要。

1. 作用域（Scope）

• var：函数作用域。变量在声明它的整个函数内可用。

  function example() {
    if (true) {
      var x = 10;
    }
    console.log(x); // 输出10（在if块外仍可访问）
  }
  

• let/const：块级作用域（ES6引入）。变量仅在其声明的代码块（如{}）内有效。

  function example() {
    if (true) {
      let y = 20;
      const z = 30;
    }
    console.log(y); // 报错：y未定义
    console.log(z); // 报错：z未定义
  }
  

2. 变量提升（Hoisting）

• var：声明被提升到作用域顶部，但初始化仍保留在原位。提升时值为undefined。

  console.log(a); // 输出undefined（不报错）
  var a = 5;
  

  等效于：

  var a;          // 声明提升
  console.log(a); // undefined
  a = 5;          // 初始化
  

• let/const：存在"暂时性死区"。声明虽被提升，但访问变量会报错（未初始化）。

  console.log(b); // 报错：Cannot access 'b' before initialization
  let b = 10;
  

3. 重复声明

• var：允许重复声明，后声明的变量会覆盖前者。

  var c = 1;
  var c = 2; // 合法
  

• let/const：禁止重复声明（同一作用域内）。

  let d = 1;
  let d = 2; // 报错：Identifier 'd' has already been declared
  

4. 可变性

• var/let：声明的变量可重新赋值。

  let e = 5;
  e = 10; // 合法
  

• const：声明时必须初始化，且不能重新赋值（但对象属性可修改）。

  const f = 5;
  f = 10; // 报错：Assignment to constant variable
  
  const obj = { name: "Alice" };
  obj.name = "Bob"; // 合法（对象内容可变）
  

5. 底层原理：词法环境与执行上下文

• JavaScript引擎通过词法环境管理变量。每个作用域对应一个词法环境，包含环境记录（存储变量）和外部引用（指向父作用域）。
• 执行代码时：
  1. 进入作用域，创建词法环境。
  2. 扫描代码，将var声明添加到环境记录并初始化为undefined（提升）。
  3. 处理let/const声明时，变量被创建但处于"未初始化"状态（暂时性死区）。
  4. 执行到赋值语句时，变量才被初始化。

总结

• 优先使用const，确保变量不可变时更安全。
• 需重新赋值时用let。
• 避免使用var，因其作用域和提升行为易导致错误。
• 底层通过词法环境管理变量生命周期，暂时性死区是let/const的关键安全机制。