JavaScript 提升 (Hoisting)

理解 JavaScript 中的 Hoisting（变量提升）

Hoisting（变量提升）是 JavaScript 的一种机制，它将变量和函数声明在代码执行前移动到其所在作用域（scope）的顶部（var 是全局作用域或函数作用域，let 和 const 是块级作用域）。这意味着你可以在代码中概念上使用变量或函数，即使它们在代码中声明的位置靠后。

重要的是要理解，只有声明会被提升，而不是初始化或赋值。我们通过 var、let、const 和函数来探讨这一点。

var 的变量提升（Hoisting）

使用 var 声明的变量会被提升到其函数作用域的顶部（如果在函数外部声明，则提升到全局作用域）。如果你在声明之前使用了 var 变量，它的值将是 undefined。

考虑这个示例：

console.log(myVar); // 输出: undefined
var myVar = 5;
console.log(myVar); // 输出: 5

在幕后，JavaScript 将其解释为：

var myVar; // 声明被提升到顶部
console.log(myVar); // 此时 myVar 是 undefined
myVar = 5; // 初始化发生在这里
console.log(myVar); // myVar 是 5

let 和 const 的变量提升（Hoisting）及暂时性死区（Temporal Dead Zone）

使用 let 和 const 声明的变量也会被提升，但它们不会被初始化。从其块（block）的开始到遇到声明位置之前，它们处于“暂时性死区”（Temporal Dead Zone，TDZ）。在 TDZ 中访问 let 或 const 变量会导致 ReferenceError。

这有助于防止错误，因为它确保你在声明变量之前无法使用它。

使用 let 的示例：

// console.log(myLetVar); // 抛出 ReferenceError：无法在初始化前访问 'myLetVar'
let myLetVar = 10;
console.log(myLetVar); // 输出: 10

相同的行为也适用于 const 声明。

函数提升（Function Hoisting）

函数声明（Function declarations）是完全被提升的。这意味着你可以在代码中调用函数声明，即使它的定义位置在调用之后。

greet(); // 输出: 来自一个被提升函数的问候！

function greet() {
  console.log("Hello from a hoisted function!");
}

然而，函数表达式（function expressions）（包括赋值给变量的箭头函数 arrow functions）不会以同样的方式被提升。如果它们被赋值给 var，变量声明会被提升，但在赋值之前，它的值（函数本身）是 undefined。如果被赋值给 let 或 const，它们会受到 TDZ 的影响。

// myFuncExpr(); // 抛出 TypeError: myFuncExpr is not a function (如果是 var) 或 ReferenceError (如果是 let/const)

var myFuncExpr = function() {
  console.log("Hello from function expression!");
};

// myArrowFunc(); // 抛出 ReferenceError: 无法在初始化前访问 'myArrowFunc'

const myArrowFunc = () => {
  console.log("Hello from arrow function!");
};

myFuncExpr(); // 正常工作
myArrowFunc(); // 正常工作

最佳实践：先声明后使用

虽然 Hoisting 是 JavaScript 的一个特性，但依赖它可能会使代码更难阅读和理解。现代 JavaScript 开发鼓励在使用变量和函数之前先声明它们。使用 let 和 const 有助于强制执行这一点，如果在 TDZ 中访问它们，会抛出错误。

始终在其作用域的开头（函数或块的顶部）声明所有变量。这提高了代码的清晰度，并有助于避免与变量提升相关的潜在错误。

使用“严格模式”（‘strict mode’）（在脚本或函数的顶部添加 'use strict';）也有助于捕获一些常见错误，尽管它本身不改变变量提升的行为，但它会让一些之前静默处理的错误抛出异常。

为了更深入地理解作用域和 TDZ，请参阅 MDN Web Docs 关于 let（暂时性死区） 和 Hoisting（变量提升） 的内容。