极客教程解释函数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() {} 。函数表达式不是吊起来的，必须在调用前定义。函数声明和函数表达式可以执行同样的任务，但它们有不同的语法和评估行为。