JavaScript - 函数提升

函数提升

JavaScript 中的函数提升是一种默认行为，即在执行代码之前，函数声明会被移动到其局部作用域的顶部。因此，你可以在函数声明之前在其作用域中调用它。需要注意的是，只有声明会被提升，初始化不会被提升。因此，变量或函数在使用前应该已经初始化。

与函数提升类似，变量提升也是一种默认行为，即变量声明会被移动到其局部作用域的顶部。我们可以在函数声明之前使用它。

让我们考虑以下 JavaScript 代码。

add(5,10); // 15
function add(x, y){
    return x + y;
}

在上面的 JavaScript 代码中，函数 add 在声明之前就被调用。这是因为 JavaScript 解释器会将函数声明提升到作用域的顶部。因此，上面的代码等同于

function add(x, y){
    return x + y;
}
add(5,10); // 15

函数提升仅适用于函数声明，而不适用于函数表达式。因此，如果函数是使用函数表达式定义的，它不会被提升到顶部。

add(5,10); // ReferenceError:初始化之前无法访问"add"函数
const add = function (x, y){
    return x + y;
}

让我们编写一些完整的 JavaScript 函数提升示例。

示例:函数提升

在下面的示例中，我们定义了 printMessage() 函数，并打印了其调用位置。

此外，我们在函数定义之前和之后分别调用了 printMessage() 函数。由于该函数被提升到了其作用域的顶部，因此打印输出没有任何错误。

<html>
<body>
   <p id = "output"> </p>
   <script>
      printMessage("Top");        
      function printMessage(pos) {
         document.getElementById("output").innerHTML += 
         "The function is called from the " + pos + "<br/>";
      }        
      printMessage("Bottom");
   </script>
</body>
</html>

输出

The function is called from the Top
The function is called from the Bottom

示例

在下面的示例中，我们在"if"块内定义了该函数。因此，该函数被提升到"if"块的顶部，并且您只能在"if"块初始化之前在其内部执行该函数。

您无法在"if"块外部访问该函数。

<html>
<body>
   <p id = "output"> </p>
   <script>
      // test("Top"); // Out of scope
      if (1) {
         test("Top"); // In the same scope
         function test(pos) {
            document.getElementById("output").innerHTML += 
            "The function is called from the " + pos + "<br/>";
         }
         test("Bottom"); // In the same scope
      }
   </script>
</body>
</html>

输出

The function is called from the Top
The function is called from the Bottom

变量提升在 JavaScript 中非常重要。但始终建议在代码开头声明函数或变量。因为 JavaScript 总是按照声明、初始化和使用的顺序解释代码。

JavaScript 变量提升

JavaScript 的变量提升行为默认将变量声明移至变量作用域的顶部。在 JavaScript 中，使用"var"关键字声明的变量会被提升至其作用域的顶部，但使用"let"和"const"关键字声明的变量不会被提升至顶部。

例如:

var x = y;
var y;

上面的代码与下面的代码类似，因为变量声明被提升到了顶部。

var y;
var x = y;

让我们通过以下示例来理解变量提升。

示例:变量提升

在下面的示例中，我们初始化了变量 y，在输出中打印了它的值，并在最后声明了它。下面的代码打印了一个值而没有任何错误，因为变量 y 在全局作用域中被提升到了顶部。

<html>
<head>
   <title> JavaScript - Variable Hoisting </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      y = 10;
      document.getElementById("output").innerHTML = 
	  "The value of the y is : " + y;
      var y;
   </script>
</body>
</html>

输出

The value of the y is : 10

示例:使用函数进行变量提升

在下面的示例中，我们定义了 printNum() 函数。在 printNum() 函数中，我们初始化了变量 y，打印了它的值，然后声明了它。

变量 y 被提升到函数顶部，因此您可以在声明它之前访问它，但无法在函数外部访问它。

<html>
<head>
   <title> JavaScript - Variable Hoisting with function </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function printNum() {
         y = 20;
         output.innerHTML += "The value of the variable y is : " + y;
         var y; // 函数作用域
      }
      printNum();
      // 变量 Y 无法在这里访问
   </script>
</body>
</html>

输出

The value of the variable y is : 20

然而，变量初始化不会被提升到块的顶部。

示例:变量初始化不会被提升

下面的示例说明变量会被提升到顶部，但变量初始化却不会。这里，我们打印变量 x，但未对其进行初始化。因此，输出结果会显示"undefined"。

<html>
<body>
   <p id = "output"> </p>
   <script>
      var x;
      document.getElementById("output").innerHTML = "x is -> " + x;
      x = 10;
   </script>
</body>
</html>

输出

x is -> undefined

示例:使用 let 和 const 关键字进行提升

以下示例说明，使用"let"和"const"关键字声明的变量不会被提升到顶部。因此，您始终需要在使用它之前先定义它。

我们使用了"trycatch"代码块来处理错误。在输出中，用户可以观察到以下代码在访问使用"let"关键字声明的变量时出现的错误。

<html>
<head>
   <title> Hoisting with let and const </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      try {
         x = 10;
         output.innerHTML += "The value of x is -> " + x;
         let x;
      }catch (error) {
         output.innerHTML += error.message;
      }
   </script>
</body>
</html>

输出

Cannot access 'x' before initialization

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流