JavaScript变量声明：var、let与const的区别及使用建议

假设你正在排查一个列表渲染逻辑：在循环中为多个按钮绑定点击事件，并在点击时弹出当前按钮的索引值。运行后你发现，无论点击哪个按钮，弹出的都是同一个最大索引值。这往往是初学者由于使用 var 声明循环计数器而踩入的典型作用域陷阱。要彻底理解并杜绝此类问题，我们需要深入剖析 var、let 与 const 的底层差异。

一、核心维度对比与特性图谱

理解这三种声明关键字，核心在于抓住三个关键维度：作用域层级、声明提升与生命周期，以及可修改性（重新赋值与重复声明）。

二、作用域机制：函数作用域 vs 块级作用域

JavaScript 的早期版本只存在全局作用域和函数作用域，没有块级作用域。这意味着用一对花括号 { } 包裹的代码块（例如 if 分支或 for 循环体）无法隔离 var 声明的变量。

function testScope() {
  if (true) {
    var count = 10;
    let limit = 20;
    const max = 30;
  }
  console.log(count); // 输出: 10（var 穿透了 if 块）
  // console.log(limit); // 抛出 ReferenceError: limit is not defined
  // console.log(max);   // 抛出 ReferenceError: max is not defined
}
testScope();

在循环场景中，作用域的差异尤为致命。考虑经典的事件回调绑定：

// 使用 var 的问题
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log("var i:", i);
  }, 100);
}
// 最终打印: var i: 3, var i: 3, var i: 3

// 使用 let 的表现
for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log("let j:", j);
  }, 100);
}
// 预期打印: let j: 0, let j: 1, let j: 2

为什么 let 能够正确打印出 0, 1, 2？因为 JavaScript 引擎在处理 for (let ...) 循环时，每次循环迭代都会创建一个全新的独立词法作用域，当前轮次的 j 值会被独立闭包捕获。而 var 整个循环只存在一个共享的函数级变量 i，循环结束后 i 已经累加到 3，所有延时回调引用的都是这同一个变量。

三、变量提升（Hoisting）与暂时性死区（TDZ）

在代码执行前，JavaScript 引擎会先进行词法解析与环境记录初始化。所有声明语句（无论是 var、let、const 还是 function）都会在编译阶段被记录到作用域中，这就是广义上的“提升”。

但关键区别在于：初始化阶段发生的时间节点不同。

• var 的行为：提升并立即初始化为 undefined。在声明语句执行前读取它，能够正常取到 undefined，不会报错。
• let 和 const 的行为：声明被识别并提升，但在执行流到达其实际声明所在行之前，该变量处于未初始化（Uninitialized）状态。此时任何访问操作都会抛出 ReferenceError。从代码块开始到声明完成之间的这一段区域，被称为暂时性死区（Temporal Dead Zone, TDZ）。

四、可变性剖析：重新赋值与引用不变性

许多初学者对 const 存在一个普遍误解：认为 const 声明的值是绝对不可改变的。事实上，const 保证的仅仅是变量标识符与内存地址绑定关系不变，而非内存地址内部存储内容不可变。

// 1. 基本数据类型（不可修改）
const PI = 3.1415926;
// PI = 3.14; // TypeError: Assignment to constant variable.

// 2. 引用数据类型（对象与数组）
const user = { name: "Alice", age: 25 };

// 修改对象属性完全合法
user.age = 26;
user.role = "admin";
console.log(user); // 输出: { name: 'Alice', age: 26, role: 'admin' }

// 改变引用目标则会报错
// user = { name: "Bob" }; // TypeError: Assignment to constant variable.

如果业务中确实需要对象内容完全不可变，应当结合 Object.freeze() 实现浅层冻结，或使用递归深冻结函数：

const config = Object.freeze({
  endpoint: "https://api.example.com",
  timeout: 5000
});
// 在严格模式下，下一行会抛出 TypeError；非严格模式下静默忽略
config.timeout = 10000;

五、工程实践中的选型决策流与使用建议

为了让团队代码保持高可读性、可维护性并最大程度降低隐式 bug，现代 JavaScript 工程（如 React、Vue、Node.js 项目）遵循明确的变量声明规约：

1. 第一优先级：永远默认使用 const。 当你声明一个变量时，默认认为其引用不可变。这样可以防止变量被意外重新赋值，同时清晰向代码阅读者传达“该标识符绑定永远固定”的信号。
2. 第二优先级：只有在明确需要重新赋值时，才退化使用 let。 典型场景包括：数值累加计数器、循环迭代控制变量、根据分支条件延后赋初始值。
3. 第三优先级：在任何现代工程中完全禁用 var。 推荐在 ESLint 中配置 no-var: "error"，从静态检查层面彻底杜绝 var 引入的函数提升和作用域污染。

六、高频易错场景与避坑指南

1. 重复声明带来的静默覆盖

var 允许在同一作用域内被无节制地重复声明，这在大型项目或多人协作时会导致极难察觉的覆盖 Bug。而 let 与 const 会在编译解析期直接拦截此类行为：

// var 允许重复声明，悄无声息覆盖旧数据
var token = "abc";
var token = "xyz"; // 合法，但原有逻辑可能被破坏

// let / const 会直接抛出语法错误
let userId = 1001;
// let userId = 1002; // SyntaxError: Identifier 'userId' has already been declared

2. 全局对象的污染

在浏览器顶层环境中，使用 var 声明的全局变量会直接挂载到 window 对象上，极易覆盖原生 API（例如 window.name、window.status 或全局函数）。而 let 和 const 声明的顶层变量只存在于全局词法作用域中，完全不会污染 window：

// 在全局作用域下运行
var status = "active";
console.log(window.status); // 被覆盖为: "active"

let age = 30;
console.log(window.age);    // 输出: undefined（保持全局环境干净）

七、总结表格

综合以上各技术维度的分析，三者的核心差异可以通过下表系统性收敛：

把握住“优先 const、次选 let、禁用 var”的基本原则，并清晰理解块级作用域、暂时性死区与内存引用锁定，便能在编写 JavaScript 代码时兼顾执行安全性与逻辑清晰度。