变量提升（Hoisting） 是 JavaScript 中的一种行为，指的是在代码执行前，JavaScript 引擎会将变量和函数的声明提升到其所在作用域的顶部。这意味着你可以在声明之前使用这些变量或函数，但实际行为因变量类型（var、let、const）和函数类型（函数声明、函数表达式）而有所不同。

一、变量

1、var 声明的变量

• 使用 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

2、let 和 const 声明的变量

提升、但不会初始化

• let 和 const 也会被提升，但不会初始化，值为 undefined，而是进入“暂时性死区”（Temporal Dead Zone, TDZ）。
• 在声明之前访问会报错，抛出 ReferenceError。

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

二、函数

1、函数声明

• 函数声明会被整体提升，包括函数体。
• 可以在声明之前调用函数。

foo(); // 输出: "Hello"
function foo() {
  console.log("Hello");
}

2、函数表达式

• 部分提升。如果是用 var 声明的函数表达式，变量名会被提升，但函数体不会。
• 在赋值之前调用会报错。

bar(); // 报错: TypeError: bar is not a function
var bar = function () {
  console.log("World");
};

三、总结

• var：声明提升，赋值不提升，初始值为 undefined。
• let 和 const：声明提升，但存在暂时性死区，访问会报错。
• 函数声明：整体提升，可以在声明前调用。
• 函数表达式：不会被提升，赋值前调用会报错。

四、示例

理解变量提升有助于避免代码中的潜在错误，尤其是在使用 var 和函数声明时。建议尽量使用 let 和 const，以避免变量提升带来的问题。

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

console.log(y); // 报错: ReferenceError: Cannot access 'y' before initialization
let y = 10;

foo(); // 输出: "foo"
function foo() {
  console.log("foo");
}

bar(); // 报错: TypeError: bar is not a function
var bar = function () {
  console.log("bar");
};

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24