解釋一下 function foo() {} 和 var foo = function() {} 在 foo 用法上的差異
- 王林轉載
- 2023-09-14 20:13:091199瀏覽
在 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 用法上的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！