在 JavaScript 中，我們有不同的方法來定義函數。 function foo() {} 和 var foo = function() { } 是定義函數的兩種不同方式。兩種方式都有其優點和不同的用例；但是，執行該函數時兩者給出相同的結果。
因此，本教程將教我們定義函數的兩種方法之間的區別。
函數 foo() { } 的解釋：函數聲明
function 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>
登錄后復制
function foo() { } 和 var foo = function() { } 之間的區別
下表重點介紹了 function foo() { } 和 var foo = function() { } 之間的主要區別：
|
函數 foo() { } |
var foo = function() { } |
|---|---|
|
這是一個函數聲明。 |
它是一個函數表達式。 |
|
它被懸掛在瞄準鏡的頂部。 |
它沒有在范圍內提升。 |
|
JavaScript 在作用域執行開始時對其進行評估。 |
JavaScript 在逐步執行代碼時對其進行評估。 |
|
我們可以通過函數名來識別它。 |
我們可以使用存儲它的標識符來識別它。 |
|
用于定義普通函數。 |
當我們需要傳遞函數作為參數或需要使用函數作為閉包時使用它。 |
結論
在 JavaScript 中，有兩種定義函數的方法：函數聲明和函數表達式。函數聲明是使用 function 關鍵字定義的，后跟函數名稱，通常寫為 function foo() {}。當程序執行到達聲明函數的作用域時，JavaScript 會對函數聲明進行求值，并將函數聲明提升到該作用域中代碼的頂部。這意味著可以在聲明之前調用它們。
函數表達式是使用變量定義的，通常寫為 var foo = function() {}。函數表達式不會被提升，必須在調用之前定義。函數聲明和函數表達式可以執行相同的任務，但它們具有不同的語法和計算行為。
以上就是解釋一下 function foo() {} 和 var foo = function() {} 在 foo 用法上的區別的詳細內容，更多請關注www.92cms.cn其它相關文章！
