解释函数foo() {}和var foo = function() {}之间foo用法的不同

在JavaScript中，我们有不同的方法来定义函数。函数foo() {}和var foo = function() { }是定义函数的两种不同方式。这两种方式都有各自的好处和不同的用例；然而，在执行函数时，这两种方式的结果是一样的。

因此，本教程将教我们如何区别这两种定义函数的方式。

函数foo(){ }的解释：函数声明

函数foo() { }是JavaScript中声明函数的正常方式，每个初学者和开发者都会使用。同时，我们也可以把它称为命名函数。

当程序执行控制到达函数声明的范围时，JavaScript会评估函数声明。函数声明的评估不是逐步进行的一部分，而是在开始时就进行评估。

另外，函数声明被悬挂在它所声明的特定作用域中的每一段代码的顶端。因此，我们可以在作用域的任何地方调用该函数，甚至在声明之前。

语法

用户可以按照下面的语法来声明这个函数。

function foo(parameters, .... ) {
   // function body
}

在上述语法中，”function “是代表函数声明的关键字，foo是函数名称。

示例

在这个例子中，我们通过函数声明定义了函数foo()。之后，我们像调用普通函数一样调用了它。

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");

         // declaring the function
         function foo() {
            output.innerHTML += "The function foo is invoked!";
         }
         foo();
      </script>
   </body>
</html>

示例

在下面的例子中，我们已经定义了带有参数的函数。我们把invokedPosition作为第二个参数，代表我们调用该函数的位置。

我们在声明之前就调用了foo()函数，因为JavaScript在执行流进入作用域时就开始评估该函数，并将其悬挂在顶部。

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");

         // As foo is hoisted on top, we can call the function before the declaration
         foo(10, "Top");

         // declaring the function with parameters
         function foo(param1, inovkingPosition) {
            output.innerHTML += "The function foo is invoked from " + inovkingPosition + "</br>";
            output.innerHTML += "The value of the param1 is " + param1 + " <br/> <br/>";
         }
         foo(20, "bottom");
      </script>
   </body>
</html>

var foo = function() { }的解释：函数表达式

var foo = function() { }也与定义函数相同，被称为函数表达式。在这里，function() { }是一个函数表达式，我们将其存储在foo变量中。foo和其他变量一样是一个普通的变量，甚至我们可以在foo变量中存储数字和字符串。

JavaScript并不像函数声明那样一开始就评估函数表达式。它是一步步地评估函数表达式。当执行流程到达函数表达式时，JavaScript会评估表达式并将其存储在foo变量中。

另外，函数表达式没有被吊在代码的顶端，所以我们不能像函数声明那样在定义函数表达式之前调用它。

语法

用户可以按照下面的语法，用函数表达式来定义函数。

var foo = function (params) {

   // function body
};

在上面的语法中，函数的定义是没有名字的，所以我们可以称它为匿名函数。我们可以使用foo变量作为该函数的标识符。

示例

在这个例子中，我们使用函数表达式定义了函数，并将其存储在foo标识符中。之后，我们使用foo标识符来调用存储在里面的函数表达式，同时我们还在foo标识符中传递参数。

<html>
   <body>
      <h2>var foo = function() { } (function expression)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");

         // defining the function expression and storing it in the foo variable
         var foo = function (param) {
            output.innerHTML += "Inside the function expression. </br>";
            output.innerHTML += "The value of the param is " + param + "</br>";
         };

         // calling the function expression via foo identifier
         foo("Hi Users!");
      </script>
   </body>
</html>

函数表达式有不同的使用情况。用户可以把它作为一个回调函数来使用，写出函数的简短语法。另外，用户还可以把它作为一个闭合函数使用。有时，我们需要将函数作为一个参数传递，然后我们可以使用函数表达式。

示例

在这个例子中，我们将函数表达式作为sort()方法的一个参数来传递。用户可以看到，我们将匿名函数作为一个参数传递，而不是用名字来写声明。

<html>
   <body>
      <h2>Passing function expression as an argument</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let number = [320, 45, 3, 23, 54];

         // passing the function expression as an argument of the sort() method
         number.sort(function (element1, element2) {
            return element2 - element1;
         });
         output.innerHTML += "The sorted array is " + number;
      </script>
   </body>
</html>

函数foo() { }与var foo = function() { }之间的区别

下表强调了函数foo() { }和var foo = function() { }之间的主要区别。

函数 foo() { }	var foo = function() { }
它是一个函数声明。	它是一个函数表达式。
它被悬挂在范围的顶部。	它没有在范围内被吊起。
JavaScript在作用域执行的开始阶段对其进行评估。	JavaScript在一步步的代码执行中对其进行评估。
我们可以用函数名称来识别它。	我们可以使用它所存储的标识符来识别它。
它被用来定义正常功能。	当我们需要传递一个函数作为参数或需要使用一个函数作为闭包时，就会用到它。

结论

在JavaScript中，有两种方法来定义一个函数：函数声明和函数表达式。函数声明是用函数关键字定义的，后面是函数名称，通常写成function foo() {} 。当程序执行到它们被声明的范围时，函数声明会被JavaScript评估，并被提升到该范围内代码的顶端。这意味着它们可以在被声明之前被调用。

函数表达式是用一个变量定义的，通常写成var foo = function() {} 。函数表达式不是吊起来的，必须在调用前定义。函数声明和函数表达式可以执行同样的任务，但它们有不同的语法和评估行为。