JavaScript 变量提升：为什么 var 让人头疼

你有没有遇到过这种怪事？在还没定义变量的时候，居然就能访问它，而且还不报错，只是给你报个 undefined。

console.log(myName); // undefined
var myName = '小明';

要是换成别的语言（比如 C 或 Java），编译器早就在你脸上摔一个 "Variable not found" 的错误了。但在 JavaScript 里，这叫“变量提升”（Hoisting）。

今天，小明就带你拆解一下，JavaScript 引擎到底在后台偷偷干了什么，以及为什么 var 会成为现代前端开发的“心头大患”。

一、什么是变量提升？

简单来说，变量提升就是 JavaScript 引擎在执行代码之前，会将变量和函数的声明移动到它们所在作用域的顶部。

注意，这里移动的只是声明，而没有赋值。

所以上面的代码在引擎眼里其实是这样的：

var myName; // 声明被提升到了顶部
console.log(myName); // 此时 myName 已经存在，但还没赋值，所以是 undefined
myName = '小明'; // 赋值留在原地

不仅变量会提升，函数声明也会提升，而且提升得更彻底——连函数体一起搬走了。

sayHello(); // "Hello, 我是小明"

function sayHello() {
  console.log("Hello, 我是小明");
}

这就是为什么你可以把函数定义写在调用位置的后面。这看起来挺方便，但在大型项目中，这种“随处可见”的声明会导致逻辑追踪变得异常困难。

要理解提升，必须知道 JavaScript 运行的两个阶段：

当引擎进入一段代码（比如一个函数）时，它会先创建一个“执行上下文”（Execution Context）。在这个阶段，引擎会：

编译完后，引擎才开始逐行跑代码。由于变量已经在第一阶段准备好了，所以你提前访问时不会报错。

如果只是 undefined 也就罢了，var 还有两个非常坑人的特性。

这是 var 最让人崩溃的地方。它只认函数作用域，不认块级作用域（比如 if 或 for）。

if (true) {
  var secret = '我是卧底';
}
console.log(secret); // "我是卧底" —— 卧底居然跑出来了！

在 if 块里定义的变量，在外面竟然能访问到。这在复杂的逻辑里简直是 Bug 的温床。

var x = 10;
// ... 几百行代码后 ...
var x = 20; // 引擎：没问题，我帮你覆盖掉

你可以重复声明同一个变量，引擎连个提醒都不给。如果你不小心起了一个重名的变量，之前的逻辑可能就莫名其妙地崩了。

为了解决 var 的历史遗留问题，ES6 引入了 let 和 const。

let 和 const 也会提升吗？技术上来说，会。但它们在提升时不会被初始化为 undefined。

在声明执行之前，如果你访问它们，会直接报错：ReferenceError。这段不能访问的区间就叫“暂时性死区”。

console.log(age); // ❌ ReferenceError!
let age = 25;

这就强制要求我们：先声明，后使用。逻辑清晰，童叟无欺。

if (true) {
  let inner = '我在盒子里';
}
console.log(inner); // ❌ ReferenceError! —— 盒子封印成功

终于，变量被关在了它该待的地方。

小明建议： 除非你在维护 2010 年以前的老项目，否则永远不要使用 var。拥抱 const（默认选择）和 let（需要修改时使用），你的代码会感谢你的。

“为什么 JS 引擎要搞变量提升？” “大概是为了给初学者一点小小的‘震撼’吧。” —— 小明

最后，送你一个冷笑话：程序员去应聘，HR 问：“你对变量提升怎么看？” 程序员说：“这得看你是在我入职前问，还是入职后问。入职后问，那就是 undefined；入职前问，那就是 ReferenceError。”