VAR、LET 和 CONST 在 JavaScript 中

Source: Dev.to

🧠 JavaScript 如何运行你的代码（非常重要）

JavaScript 并不会立即逐行执行代码。
它会先 准备好一切，然后再运行。

内存创建阶段

JS 引擎：

• 扫描整个代码
• 为变量和函数分配内存
• 不 立即赋值

执行阶段

• 逐行执行代码
• 赋值
• 调用函数

所有这些都发生在 执行上下文 中。

🧪 var — 原始的麻烦制造者

console.log(a);
var a = 10;

结果： undefined（不是错误），因为 var 会提升并以 undefined 初始化。

背后发生的事

内存阶段

a → undefined

执行阶段

console.log(a); // undefined
a = 10;

关于 var 的关键要点

• ✅ 已提升
• ✅ 用 undefined 初始化
• ❌ 不是块级作用域（函数作用域）
• ❌ 可以重新声明
• ❌ 容易出错

var 不遵守块级作用域

if (true) {
  var secret = "I should not escape";
}
console.log(secret); // 😱 它泄漏了

var 会忽略 {} 块，这导致了许多真实世界的 bug。

🧠 迎接 let — 负责的选择

console.log(b);
let b = 20;

错误： ReferenceError: Cannot access 'b' before initialization

暂时性死区（TDZ）—— 简单解释

TDZ 是指从内存分配到变量初始化之间的时间段。

内存阶段

b →

执行阶段

console.log(b); // ❌ TDZ 错误
b = 20;         // TDZ 在这里结束

引擎知道变量已经存在，但在初始化之前禁止访问。

块级作用域（终于来了！）

if (true) {
  let score = 100;
}
console.log(score); // ❌ ReferenceError

let 尊重块的边界，使代码更安全、更整洁。

🔒 const — 严格的选择

const pi = 3.14;
pi = 3.14159; // ❌ TypeError

const 的规则

• 必须立即初始化
• 不能重新赋值
• 块级作用域
• 已提升（但在初始化前仍在 TDZ 中）

const x; // ❌ SyntaxError

著名的 const + 对象混淆

const user = { name: "Hardeep" };
user.name = "Singh"; // ✅ 允许
user = {};           // ❌ 不允许

const 固定的是 引用，而不是对象的内容——可以把它想象成一个固定的地址，里面的家具可以搬动。

📊 快速对比表

🧠 背后原理（稍微 nerd 一点）

• 变量环境 → var 使用
• 词法环境 → let 与 const 使用

这就是为什么 var 会泄漏出块，而 let、const 不会。

🚀 最佳实践（血的教训）

• ✅ 默认使用 const
• ✅ 只有在需要重新赋值时才使用 let
• ❌ 除非维护旧代码，否则避免使用 var

如果今天重新设计 JavaScript，var 可能根本不存在。

🎯 最后思考

• var → 风险大且已过时
• let → 安全且灵活
• const → 最安全且首选

JavaScript 并不奇怪；我们只是终于弄清了它的工作原理。