資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究解釋`foo()` {} 和 `var foo = function() {}`這兩種方式在使用foo時的區別。
在 JavaScript 中，我們有不同的方法來定義函式。`function foo() {}` 和 `var foo = function() {}` 是定義函式的兩種不同方式。這兩種方式各有優缺點和不同的使用場景；但是，在執行函式時，兩者都會產生相同的結果。
因此，本教程將講解定義函式這兩種方式之間的區別。
函式宣告 `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() {}` 之間的區別。
`function foo() {}` |
`var foo = function() {}` |
|---|---|
這是一個函式宣告。 |
這是一個函式表示式。 |
它被提升到作用域的頂部。 |
它不會被提升到作用域中。 |
JavaScript 在作用域執行開始時對其進行評估。 |
JavaScript 逐步執行程式碼時對其進行評估。 |
我們可以使用函式名稱來識別它。 |
我們可以使用儲存它的識別符號來識別它。 |
它用於定義普通函式。 |
當我們需要將函式作為引數傳遞或需要使用函式作為閉包時，可以使用它。 |
結論
在 JavaScript 中，有兩種定義函式的方式：**函式宣告** 和 **函式表示式**。函式宣告使用 `function` 關鍵字定義，後跟函式名，通常寫成 `function foo() {}`。JavaScript 在程式執行到達宣告它們的範圍時評估函式宣告，並將它們提升到該範圍的程式碼頂部。這意味著可以在宣告它們之前呼叫它們。
函式表示式使用變數定義，通常寫成 `var foo = function() {}`。函式表示式不會被提升，必須在呼叫之前定義。函式宣告和函式表示式可以執行相同的任務，但它們的語法和評估行為不同。
1K+ 次瀏覽
