哈喽，各位技术伙伴们，欢迎来到【哈希茶馆】！今天我们来聊聊 JavaScript 中一个非常有趣但也容易让人踩坑的特性------变量提升 (Hoisting)。你是否遇到过这样的情况：明明感觉代码逻辑没问题，但运行结果却出乎意料？这背后可能就是变量提升在"作祟"。别担心，泡杯茶，我们一起来揭开它的神秘面纱！
什么是变量提升？为什么它如此重要？
简单来说，JavaScript 引擎在执行代码之前，会先进行一个"预处理"阶段。在这个阶段，变量和函数的声明会被"提升"到其所在作用域的顶部。注意，这里强调的是"声明"的提升，而不是"赋值"。
理解变量提升至关重要，因为：
- 它可以解释一些看似奇怪的代码行为。
- 帮助我们写出更健壮、更可预测的 JavaScript 代码。
- 是理解作用域、
let/const与var差异等进阶概念的基础。
那么，变量提升具体是如何运作的呢？我们通过代码实例来一探究竟。
var 声明的变量：只提升声明，不提升赋值
当我们使用 var 关键字声明变量时，只有声明部分会被提升，赋值操作会保留在原来的位置。
javascript
console.log(myVar); // 输出：undefined
var myVar = "你好，哈希茶馆！";
console.log(myVar); // 输出：你好，哈希茶馆！代码解读
你可能会想，在 console.log(myVar) 执行时，myVar 还没被声明和赋值，应该会报错才对呀？
实际上，由于变量提升，上面的代码在 JavaScript 引擎眼中是这样的：
javascript
var myVar; // myVar 的声明被提升到作用域顶部，并默认赋值 undefined
console.log(myVar); // 输出：undefined
myVar = "你好，哈希茶馆！"; // 赋值操作保留在原位
console.log(myVar); // 输出：你好，哈希茶馆！这就是为什么第一个 console.log 会输出 undefined 而不是抛出 ReferenceError。undefined 表示变量已被声明但尚未被赋予具体的值。
let 和 const：提升，但有"暂时性死区" (TDZ)
ES6 引入的 let 和 const 同样存在变量提升，但它们的行为与 var 有显著不同。它们虽然也被提升，但在声明语句执行之前，这些变量处于"暂时性死区"（Temporal Dead Zone, TDZ）。在 TDZ 中访问这些变量会导致 ReferenceError。
javascript
// console.log(myLetVar); // 若取消注释，会抛出 ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = "使用 let 声明";
console.log(myLetVar); // 输出：使用 let 声明
// console.log(myConstVar); // 若取消注释，会抛出 ReferenceError: Cannot access 'myConstVar' before initialization
const myConstVar = "使用 const 声明";
console.log(myConstVar); // 输出：使用 const 声明代码解读
- 对于
let和const，虽然它们的声明在概念上也被提升了，但在代码执行流到达它们的实际声明位置之前，它们是不可访问的。 - 这种机制有助于我们更早地发现潜在的错误，避免在变量未初始化时就使用它。
函数声明：整个函数体都被提升
与变量声明不同，函数声明（使用 function 关键字直接声明的函数）在提升时，不仅是函数名，整个函数体都会被提升。这意味着你可以在函数声明之前调用它。
javascript
sayHello(); // 输出：你好，我是函数声明！
function sayHello() {
console.log("你好，我是函数声明！");
}代码解读
由于函数声明 sayHello 整个被提升到了作用域顶部，所以在它实际定义代码的前面调用它是完全合法的。
注意：函数表达式不会这样！
如果函数是通过函数表达式（例如，将一个匿名函数赋值给一个变量）创建的，那么它的行为将遵循变量提升的规则（var、let 或 const）。
javascript
// greetMe(); // 若取消注释，会抛出 TypeError: greetMe is not a function (因为 greetMe 此时是 undefined)
var greetMe = function() {
console.log("你好，我是函数表达式！");
};
greetMe(); // 输出：你好，我是函数表达式！
// tryLetGreet(); // 若取消注释，会抛出 ReferenceError (TDZ)
// let tryLetGreet = function() {
// console.log("你好，我是 let 函数表达式！");
// };
// tryLetGreet();对于 var greetMe = function() {...}，变量 greetMe 的声明被提升了，但赋值（即函数体本身）没有。所以在 greetMe() 调用时，greetMe 只是 undefined，尝试将其作为函数调用自然会产生 TypeError。
如果使用 let 或 const 定义函数表达式，则会受到 TDZ 的影响，提前调用会报 ReferenceError。
变量提升 vs. 函数提升：谁的优先级更高？
当同一个作用域内既有变量声明又有函数声明，并且它们同名时，函数声明的提升优先级更高。
javascript
console.log(typeof myThing); // 输出：function
var myThing = "我是一个变量";
function myThing() {
console.log("我是一个函数");
}
console.log(typeof myThing); // 输出：string代码解读
-
预处理阶段：
函数声明
function myThing() {...}被提升。变量声明
var myThing;也被提升。由于函数声明优先级更高，此时
myThing指向函数。所以第一个console.log(typeof myThing)输出function。 -
执行阶段：
代码按顺序执行。
myThing = "我是一个变量";这行代码执行后，myThing的值被重新赋为字符串。所以第二个
console.log(typeof myThing)输出string。
如何避免变量提升带来的"意外"？
虽然变量提升是 JavaScript 的一个特性，但我们可以通过一些良好的编码习惯来最大程度地减少它可能带来的困扰：
- 始终在作用域顶部声明变量 ：即使使用
var，也将所有变量声明放在函数或全局作用域的开始处。这使得代码的实际行为与你的直观理解更一致。 - 优先使用
let和const：它们引入了块级作用域和暂时性死区，能有效帮助你避免很多由var变量提升引起的常见问题，让代码更可预测、更易于维护。 - 函数先声明后使用：尽管函数声明会被提升，但为了代码的可读性和清晰性，养成在调用函数之前先声明它的好习惯。
总结
变量提升是 JavaScript 中一个基础且重要的概念。它描述了变量和函数声明在代码执行前被移至其作用域顶部的行为。
var声明的变量会提升声明（值为undefined），赋值留在原地。let和const声明的变量也会提升，但存在暂时性死区 (TDZ)，在声明前访问会报错。- 函数声明会完整提升整个函数体。
- 函数声明的提升优先级高于变量声明。
理解了变量提升，你就能更好地洞察 JavaScript 代码的执行流程，写出更优雅、更少 bug 的代码。希望今天的分享能帮助你扫清一些 JavaScript 学习路上的小障碍！
如果你觉得这篇文章对你有帮助，欢迎点赞 、推荐 和分享给更多的小伙伴！我们下期再见！
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧