《代码还没写，变量先“起飞”？一文彻底搞懂 JS 变量提升》

你是不是也经历过这种崩溃瞬间：明明变量还没定义到下一行，结果控制台直接报出了 undefined，而不是预期的值。甚至有时候代码顺序颠倒了一下，程序居然还能跑通。这背后藏着一个让无数前端新人抓狂的机制——JavaScript 变量提升。

别急着翻书查定义，咱们从实际场景切入，把这事儿一次性捋顺。

引擎的“准备工作”

要理解变量提升，得先明白 JavaScript 执行代码时的两个阶段：创建阶段和执行阶段。

当你打开浏览器运行脚本时，引擎不会像流水账一样一行行立刻执行，它先会快速扫描整个作用域，把所有声明（Declaration）提到当前作用域的顶部，这就像厨师在开火前先备好了所有菜，不管你在菜单上的哪个位置写的这道菜。

举个最经典的例子：

console.log(name); // 输出: undefined
var name = 'Alice';

很多人以为这里 name 还没存在，应该报错。但实际输出是 undefined。这是因为引擎在准备阶段做了手脚，代码逻辑被“重塑”成了这样：

var name;          // 声明被提上去了
console.log(name); 
name = 'Alice';    // 赋值留在原地

看到了吗？只有声明被提升，初始化（赋值）依然留在原位。这就是为什么你拿到的是 undefined 而不是报错，因为变量容器已经建好了，只是里面还是空的。

函数比变量更“霸道”

同样是提升，函数的待遇明显不一样。函数声明会被整体提升，连函数体都搬走了。

sayHi(); // 正常输出 Hi
function sayHi() {
  console.log('Hi');
}

这段代码在任何 IDE 里都能跑通。但如果换成 var 声明的函数呢？

sayBye(); // 抛出 TypeError: sayBye is not a function
var sayBye = function() {};

这里就变成了变量提升。var sayBye; 被提上去了，但 = function(){} 没动。所以此时 sayBye 是个空壳，自然没法调用。记住这点很重要：函数声明可以随意放位置，函数表达式必须谨慎处理。

现代语法的“雷区”：TDZ

ES6 引入了 let 和 const 后，规则变了。它们不再遵循传统意义的“提升”，而是存在暂时性死区（TDZ）。

虽然 technically 说它们也被提升了，但在初始化之前访问就会直接报错 ReferenceError，而不是返回 undefined。

console.log(count); // 报错
let count = 0;

这种设计其实是好事。它强制开发者必须先定义再使用，避免了因为疏忽导致的隐式错误。以前用 var 时那种“能运行但不确定值对不对”的模糊状态，在 let 面前被彻底堵死了。这也意味着，现在的新项目中，变量提升不再是借口，不规范写法会直接拦截你。

给开发者的几点实在建议

了解原理不是为了炫技，而是为了写出健壮的代码。基于提升机制，有几点实操经验值得参考：

1. 拒绝依赖提升：不要指望把变量声明写在下面也能生效。即使它能运行，也会增加阅读成本，让维护者困惑。
2. 声明置顶：养成习惯，在每个作用域的最开始统一声明所有需要的变量。这能让数据流向一目了然。
3. 优先使用 const 和 let：既然它们有更严格的保护机制，就充分利用起来，减少 var 带来的不可控风险。
4. 警惕匿名函数提升：如果需要在条件语句中定义函数，尽量提前在外面写好，不要在运行时动态生成逻辑复杂的函数表达式。

结语

变量提升本质上是 JavaScript 引擎为了保证作用域管理而做的优化，并非 Bug。但它确实像一枚“暗雷”，容易让粗心的开发者掉进坑里。

真正的熟练不是靠背诵规则，而是通过规范编码习惯，让代码行为变得可预测。当你的变量都在最合适的地方出现，不再依赖引擎的“自动安排”时，那些莫名其妙的 undefined 自然就消失了。保持警惕，规范书写，才是对抗复杂逻辑的根本。