【JavaScript】变量提升与函数提升详解

在 JavaScript 中，变量和函数的定义并不是总是按照代码的书写顺序执行的。通过了解变量提升（hoisting）和函数提升（hoisting），开发者可以更好地理解 JavaScript 代码的执行顺序，避免常见的错误和困惑。本文将详细介绍 JavaScript 中的变量提升和函数提升机制，并提供实用的代码示例，帮助开发者掌握这一概念。

一、什么是变量提升和函数提升？

在 JavaScript 中，变量提升和函数提升是指在代码执行之前，变量和函数的声明会被“提升”到它们所在作用域的顶端。这意味着即使在变量或函数被定义之前就已经使用它们，JavaScript 也不会报错。理解这个机制有助于开发者避免意想不到的行为，写出更加可靠的代码。

1. 变量提升概述

变量提升是指在代码执行阶段，变量声明（不包括赋值）会被提升到其作用域的最顶端。在提升之后，变量在其作用域内的任何地方都可以访问到，但如果变量在提升后的初始赋值之前使用，它的值会是 undefined。

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

在上述代码中，变量 a 的声明被提升到顶部，但赋值 10 并没有被提升。因此，在第一次 console.log(a) 中，a 的值是 undefined。只有在变量赋值完成后，a 的值才变为 10。

2. 函数提升概述

与变量类似，函数声明也会被提升到其作用域的顶部。不同的是，函数声明不仅会提升其名称，还会提升整个函数体。因此，即使在函数声明之前调用该函数，代码仍然可以正常执行。

console.log(foo()); // 输出：Hello!
function foo() {
  return "Hello!";
}

在上述代码中，函数 foo 在调用之前就已经声明和定义，因此即使在函数定义之前调用它，依然能够正常执行。

二、变量提升与函数提升的区别

虽然变量提升和函数提升有一些相似之处，但它们之间存在显著差异，特别是在如何处理变量和函数声明方面。

1. 变量提升与赋值的分离

在变量提升中，只有变量的声明会被提升，而赋值操作仍然会留在原地执行。这意味着在变量赋值之前，变量会被提升，但其值会是 undefined。

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

上面的代码展示了变量 x 的声明被提升了，但赋值操作并没有被提升，因此在第一次 console.log 中输出的是 undefined。

2. 函数提升的完整性

与变量不同，函数提升不仅仅提升了函数名称，还包括了整个函数的定义。因此，在调用函数时，无论该函数定义在调用之前还是之后，都可以正常使用。

console.log(bar()); // 输出：42
function bar() {
  return 42;
}

在这段代码中，函数 bar 的完整声明和定义都被提升到了作用域的顶部，因此函数调用在函数定义之前也是合法的。

三、函数表达式与函数提升

虽然函数声明会被提升，但函数表达式却不会被提升。这是因为函数表达式中的函数定义是赋值操作，而赋值操作不会被提升。

1. 函数表达式的行为

函数表达式是在赋值语句中定义的函数，与函数声明不同，函数表达式的提升行为与变量提升相同，即仅提升变量声明，不提升赋值部分。

console.log(baz); // 输出：undefined
var baz = function() {
  return "Hi!";
};
console.log(baz()); // 输出：Hi!

在这段代码中，baz 是一个函数表达式，它的声明被提升了，但函数赋值操作没有被提升，因此在第一次 console.log 时，baz 的值是 undefined。只有在函数赋值完成后，baz 才能被调用。

2. 函数声明与函数表达式的对比

函数声明与函数表达式的提升行为有着显著的区别，函数声明提升整个函数，而函数表达式只提升变量声明。这也是导致代码行为不同的原因之一。

// 函数声明
foo(); // 输出：I'm a function declaration.
function foo() {
  console.log("I'm a function declaration.");
}

// 函数表达式
bar(); // TypeError: bar is not a function
var bar = function() {
  console.log("I'm a function expression.");
};

在上述代码中，函数声明 foo 在调用前已被提升并定义，因此可以正常运行。而函数表达式 bar 仅提升了变量声明，导致在第一次调用时 bar 是 undefined，从而抛出 TypeError 错误。

四、变量提升的作用域

JavaScript 中的变量提升只会在其定义的作用域内生效。不同的变量声明方式（var、let、const）也会影响变量的提升行为。

1. var 的函数作用域提升

var 声明的变量是函数作用域的，这意味着变量提升会作用于整个函数作用域，而不是块级作用域。

function example() {
  console.log(x); // 输出：undefined
  var x = 10;
}
example();

在这个例子中，x 的声明被提升到了函数 example 的顶部，但赋值操作没有提升。

2. let 和 const 的块级作用域提升

let 和 const 关键字声明的变量是块级作用域的，且不会像 var 那样进行提升。如果在声明前使用 let 或 const 声明的变量，会抛出 ReferenceError 错误。

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

在这段代码中，y 的声明不会被提升，因此在声明之前使用它会导致错误。

五、变量提升的实际应用场景

1. 避免变量提升带来的潜在问题

由于变量提升，代码中可能会出现意想不到的行为。例如，在大型代码库中，如果不清楚变量提升的机制，可能会导致意外的 undefined 值。

var a = 10;
function test() {
  console.log(a); // 输出：undefined
  var a = 20;
}
test();

在这个例子中，由于 a 的声明被提升到了函数 test 的顶部，因此 console.log(a) 输出的是 undefined 而不是全局的 a 值 10。

2. 利用函数提升优化代码结构

函数提升可以帮助开发者将重要的函数声明放在代码的底部，从而让代码更具可读性和结构性。即使函数定义在底部，仍然可以在上方进行调用。

initialize();

function initialize() {
  console.log("Initialization complete.");
}

在这段代码中，函数 initialize 被提升，因此可以在函数定义之前调用。这种方式可以让开发者将主逻辑放在代码开头，而将辅助函数放在代码的底部。

六、总结

JavaScript 中的变量提升和函数提升是理解代码执行顺序的关键。通过理解变量和函数声明如何被提升，开发者可以避免常见的错误，编写更加清晰、健壮的代码。

推荐：

• JavaScript
• react
• vue

---