当前位置：首页 > news >正文

变量提升函数提升

news 2025/6/27 10:53:44

示例 1：变量提升

原始代码：

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

提升后的代码（理解为）：

var x; // 变量声明被提升
console.log(x); // 输出: undefined
x = 5; // 赋值
console.log(x); // 输出: 5

解析

var x; 这条声明被提升到顶部。
第一个 console.log(x); 输出 undefined，因为 x 尚未被赋值。
然后 x = 5; 被执行，给 x 赋值为 5。
第二个 console.log(x); 输出 5。

示例 2：函数提升

原始代码：

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

提升后的代码（理解为）：

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

解析

function greet() { ... } 这个函数声明会被提升到函数作用域的顶部。
函数可以在声明之前被调用，因此 greet(); 调用成功，并输出 "Hello!"。

示例 3：函数表达式的提升

原始代码：

console.log(func); // 输出: undefined
var func = function() {console.log("This is a function expression");
}
func(); // 运行时会抛出错误: TypeError: func is not a function

提升后的代码（理解为）：

var func; // 变量声明被提升
console.log(func); // 输出: undefined
func = function() {console.log("This is a function expression");
}func(); // TypeError: func is not a function

解析

var func; 声明被提升，func 变量的值在此时是 undefined。
第一个 console.log(func); 输出 undefined。
func 被赋值为一个函数。这时如果我们在没有调用前进行调用会因为 func 为 undefined 而抛出错误。
如果这里再调用 func();，会导致一个 TypeError，因为 func 没有赋值为实际的函数。

示例 4：命名函数表达式的提升

原始代码：

console.log(myFunction); // 输出: undefined
myFunction(); // TypeError: myFunction is not a functionvar myFunction = function hey() {console.log("Hello, world!");
};myFunction(); // 输出: "Hello, world!"

提升后的代码（理解为）：

var myFunction; // 变量声明被提升console.log(myFunction); // 输出: undefined
myFunction(); // TypeError: myFunction is not a functionmyFunction = function hey() { // 赋值console.log("Hello, world!");
};myFunction(); // 输出: "Hello, world!"

解析

var myFunction; 声明被提升，因此在第一次使用时，myFunction 是已声明的，但尚未赋值，因此其值为 undefined。
当到达 myFunction(); 这一行时，myFunction 仍然是 undefined，因此会引发 TypeError，表示 myFunction 不是一个函数。
在 myFunction = function hey() { ... } 这行之后，myFunction 被赋予了一个函数引用，因此再调用 myFunction(); 时会输出 "Hello, world!"。