咳咳，各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊 JavaScript 里的一个老生常谈但又总让人犯迷糊的家伙——变量提升 (Hoisting)。放心，咱们不搞学术那一套，争取用最接地气的方式，把这玩意儿给扒个精光。
开场白：啥是变量提升？
想象一下，你正在厨房做饭，菜谱上写着“先放盐，再炒菜”。但你脑子一抽，先炒了菜，然后才发现盐还没拿出来。这时候，你好像提前“提升”了拿盐这个动作，虽然实际上你还没做，但你心里已经计划好了。
JavaScript 的变量提升也差不多这意思。在你写代码的时候，虽然你可能把变量或函数的声明放在后面，但 JavaScript 引擎在执行代码前，会先扫描一遍，把这些声明“提升”到作用域的顶部。注意，这里仅仅是声明被提升，赋值操作还在原来的位置。
第一幕：var 的奇幻漂流
var 声明的变量，是提升界的老大哥，也是最容易让人翻车的。咱们先看个例子：
console.log(myVar); // 输出：undefined
var myVar = "Hello, Hoisting!";
console.log(myVar); // 输出：Hello, Hoisting!哎？这是什么巫术？第一行代码还没声明 myVar 呢，竟然没报错，还输出了 undefined！这就是 var 的“声明提升”。
实际上，JavaScript 引擎是这么理解的：
var myVar; // 声明被提升到顶部，默认值为 undefined
console.log(myVar);
myVar = "Hello, Hoisting!"; // 赋值操作还在原来的位置
console.log(myVar);也就是说，var 声明的变量，在代码执行前，就已经被声明了，只不过还没赋值，所以是 undefined。
再来一个更刺激的：
function myFunction() {
console.log(myVar); // 输出：undefined
var myVar = "Inside Function";
console.log(myVar); // 输出：Inside Function
}
myFunction();
console.log(typeof myVar); // 输出：undefined (如果在函数外部)这里，myVar 在函数内部被重新声明，形成了函数作用域内的变量。外部访问不到函数内部的 myVar，所以 typeof myVar 是 undefined。（如果在函数外部已经声明了 myVar，那结果就另当别论了）
重点总结：var 的特点
- 声明提升：
var声明的变量会被提升到其所在作用域的顶部。 - 默认值： 提升后，变量的默认值为
undefined。 - 函数作用域： 在函数内部用
var声明的变量，只在该函数内部有效。
第二幕：let 和 const 的冷酷登场
let 和 const 是 ES6 引入的新特性，它们在提升方面，表现得更加“严谨”。咱们直接上代码：
console.log(myLet); // 报错：ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello, Let!";
console.log(myLet); // 输出：Hello, Let!哎呦，报错了！跟 var 完全不一样！这是因为 let 和 const 声明的变量，虽然也会被提升，但是它们不会被初始化。在声明语句之前访问它们，会抛出 ReferenceError。
这个报错区域，有个高大上的名字，叫做“暂时性死区 (Temporal Dead Zone, TDZ)”。你可以理解为，let 和 const 声明的变量，虽然被提升了，但被困在了一个“小黑屋”里，只有等到声明语句执行之后，才能被访问。
再看一个 const 的例子：
console.log(myConst); // 报错：ReferenceError: Cannot access 'myConst' before initialization
const myConst = "Hello, Const!";
console.log(myConst); // 输出：Hello, Const!结果跟 let 一样，也会报错。
重点总结：let 和 const 的特点
- 声明提升：
let和const声明的变量也会被提升，但不会被初始化。 - 暂时性死区 (TDZ)： 在声明语句之前访问
let或const声明的变量，会抛出ReferenceError。 - 块级作用域：
let和const声明的变量具有块级作用域，只在声明它们的代码块内有效（例如，if语句、for循环等）。 - const 的特殊性：
const声明的变量必须在声明时赋值，并且不能重新赋值（但如果const声明的是对象或数组，对象或数组内部的属性或元素是可以修改的）。
第三幕：function 声明的华丽登场
函数声明 (function declaration) 的提升行为，跟 var 有点相似，但又有所不同。看代码：
myFunction(); // 输出：Hello, Function!
function myFunction() {
console.log("Hello, Function!");
}咦？函数还没定义呢，就能调用了！这就是函数声明的提升。
实际上，JavaScript 引擎是这么理解的：
function myFunction() { // 函数声明被提升到顶部
console.log("Hello, Function!");
}
myFunction();也就是说，函数声明会被完整地提升到作用域的顶部，包括函数体。
但是，如果使用函数表达式 (function expression) 的方式来定义函数，情况就不同了：
myFunction(); // 报错：TypeError: myFunction is not a function
var myFunction = function() {
console.log("Hello, Function Expression!");
};这里，myFunction 实际上是一个变量，只不过它的值是一个函数。因此，它的提升行为跟 var 声明的变量一样，只会提升声明，而不会提升赋值。所以，在赋值之前调用 myFunction，会报错。
重点总结：function 的特点
- 函数声明提升： 函数声明会被完整地提升到其所在作用域的顶部，包括函数体。
- 函数表达式： 函数表达式的提升行为跟
var声明的变量一样，只会提升声明，而不会提升赋值。
第四幕：更复杂的情况：作用域链的影响
变量提升还跟作用域链有关。记住，提升只发生在当前作用域内。
var myVar = "Global";
function myFunction() {
console.log(myVar); // 输出：undefined
var myVar = "Local";
console.log(myVar); // 输出：Local
}
myFunction();
console.log(myVar); // 输出：Global在 myFunction 内部，var myVar = "Local"; 实际上声明了一个新的变量 myVar，这个变量只在 myFunction 内部有效。因此，第一个 console.log(myVar) 输出的是函数内部的 myVar，但由于它还没有被赋值，所以是 undefined。
表格总结：各种声明方式的提升行为
| 声明方式 | 提升行为 |
|---|---|
var |
声明被提升到作用域顶部，默认值为 undefined。 |
let |
声明被提升，但不会被初始化。在声明语句之前访问会抛出 ReferenceError (TDZ)。 |
const |
声明被提升，但不会被初始化。在声明语句之前访问会抛出 ReferenceError (TDZ)。 必须在声明时赋值，且不能重新赋值（但如果 const 声明的是对象或数组，对象或数组内部的属性或元素是可以修改的）。 |
function declaration |
整个函数声明（包括函数体）被提升到作用域顶部。 |
function expression |
提升行为跟 var 声明的变量一样，只会提升声明，而不会提升赋值。 |
最佳实践：避免踩坑指南
- 先声明，后使用： 这是最简单粗暴，也是最有效的避免提升问题的方法。养成良好的编码习惯，在代码的开头声明所有变量和函数。
- 尽量使用
let和const：let和const的 TDZ 可以帮助你尽早发现问题，避免一些潜在的 bug。而且，let和const的块级作用域，可以使你的代码更加清晰和易于维护。 - 避免在同一作用域内重复声明变量： 尽量避免在同一个作用域内使用
var重复声明变量，这很容易导致混乱。let和const会阻止你在同一个块级作用域内重复声明变量，从而避免这个问题。 - 理解作用域链： 搞清楚变量的作用域，避免在不该访问变量的地方访问变量。
结语：掌握提升，笑傲江湖
变量提升是 JavaScript 的一个重要特性，也是一个容易让人犯错的地方。通过理解提升的原理，掌握各种声明方式的特点，并养成良好的编码习惯，你就可以避免踩坑，写出更加健壮和易于维护的代码。
希望今天的讲座对你有所帮助！下次再见！