如何理解变量提升和函数提升

在 JavaScript 中，变量提升和函数提升是指在代码执行之前，变量和函数声明会被提升到其所在作用域的顶部。这意味着你可以在声明之前使用它们，但它们的行为有所不同。

变量提升

变量提升是指变量声明（使用 var）会被提升到其所在作用域的顶部，但不会提升赋值部分。变量在提升后会被初始化为 undefined。

示例

console.log(a); // 输出: undefined
var a = 10;
console.log(a); // 输出: 10

上面的代码等价于：

var a;
console.log(a); // 输出: undefined
a = 10;
console.log(a); // 输出: 10

注意

• let 和 const 声明的变量也会被提升，但它们在声明之前不能被访问。这种行为被称为“暂时性死区（Temporal Dead Zone, TDZ）”。

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

函数提升

函数提升是指函数声明会被提升到其所在作用域的顶部，并且整个函数体都会被提升。这意味着你可以在函数声明之前调用它。

示例

console.log(sum(2, 3)); // 输出: 5function sum(a, b) {return a + b;
}

上面的代码等价于：

function sum(a, b) {return a + b;
}console.log(sum(2, 3)); // 输出: 5

注意

• 函数表达式不会被提升。只有函数声明会被提升。

console.log(multiply(2, 3)); // TypeError: multiply is not a functionvar multiply = function(a, b) {return a * b;
};

上面的代码等价于：

var multiply;
console.log(multiply(2, 3)); // TypeError: multiply is not a functionmultiply = function(a, b) {return a * b;
};

总结

• 变量提升：var 声明的变量会被提升到作用域的顶部，并初始化为 undefined。let 和 const 声明的变量也会被提升，但在声明之前不能被访问。
• 函数提升：函数声明会被提升到作用域的顶部，并且整个函数体都会被提升。函数表达式不会被提升。

理解变量提升和函数提升有助于避免在代码中出现意外行为，并编写更清晰和可维护的代码。