|
|
|
|
|
|
JavaScript函數表達式與函數聲明的差異及注意事項
作者:admin 時間:2022-6-9 17:46:9 瀏覽:函數聲明和函數表達式是使用function關鍵字創建函數的兩種方法，在本文中，我將介紹這兩種方法的差異，以及使用它們時的注意事項。
函數表達式與函數聲明
讓我們舉一個例子來說明差異——我們創建一個對數字求和的函數的 2 個版本：
function sumA(a, b) {
return a + b;
}
(function sumB(a, b) {
return a + b;
});
sumA(1, 2); // ???
sumB(1, 2); // ???一種情況，你可以像往常一樣定義函數（sumA函數）。另一種情況，函數被放置在一對括號中（sumB函數）。
如果你調用sumA(1, 2)和sumB(1, 2)會發生什么？
正如預期的那樣，sumA(1, 2)只需返回1和2數字的總和： 3。而，調用sumB(1, 2)會引發錯誤Uncaught ReferenceError: sumB is not defined。
解釋是sumA使用函數聲明創建的，它在當前范圍內創建一個函數變量（與函數名稱相同）。但是sumB是使用函數表達式創建的（它被包裹在括號中），它不會在當前范圍內創建函數變量。
如果要訪問使用函數表達式創建的函數，可以將函數對象保存到變量中：
const sum = (function sumB(a, b) {
return a + b;
});
sum(1, 2); // => 3如何區分函數聲明和函數表達式
下面是關于如何區分函數聲明和函數表達式的簡單方法：
如果語句以function關鍵字開頭，則為函數聲明，否則為函數表達式。
// 函數聲明: 用 `function` 關鍵詞開始
function sumA(a, b) {
return a + b;
}
// 函數表達式: 不以 `function` 關鍵詞開始
const mySum = (function sumB(a, b) {
return a + b;
});
// 函數表達式: 不以 `function` 關鍵詞開始
[1, 2, 3].reduce(function sum3(acc, number) {
return acc + number
});
從更高的角度來看，函數聲明對于創建獨立函數很有用，但函數表達式作為回調很好。
現在，讓我們更深入地研究函數聲明和函數表達式的使用。
2、函數聲明
在前面的示例中已經看到的，sumA是一個函數聲明：
function sumA(a, b) {
return a + b;
}
sumA(4, 5); // => 9當語句包含關鍵字后跟函數名、一對帶參數的括號以及用一對花括號括起來的函數體時，就是函數聲明。
function(param1, param2, paramN){ }
函數聲明創建了一個函數變量——一個與函數名同名的變量（例如前面例子的sumA）。函數變量可以在當前范圍內（函數聲明之前和之后）訪問，甚至可以在函數的范圍內訪問。
函數變量通常用于調用函數或將函數對象傳遞給其他函數（傳遞給高階函數）。
例如，我們編寫一個函數sumArray(array)，對數組的項進行遞歸求和（該數組可以包含數字或其他數組）：
sumArray([10, [1, [5]]]); // => 16
function sumArray(array) {
let sum = 0;
for (const item of array) {
sum += Array.isArray(item) ? sumArray(item) : item;
}
return sum;
}
sumArray([1, [4, 6]]); // => 11
function sumArray(array) { ... }是一個函數聲明。
包含函數對象的函數變量sumArray在當前范圍內可用：在函數聲明之前sumArray([10, [1, [5]]])和之后sumArray([1, [4, 6]])，以及在函數本身的范圍內sumArray(item)（允許遞歸調用）。
由于提升，函數變量在函數聲明之前可用。
函數聲明的注意事項
函數聲明語法的作用是創建獨立函數。函數聲明應在全局范圍內或直接在其他函數的范圍內：
// 好!
function myFunc1(param1, param2) {
return param1 + param2;
}
function bigFunction(param) {
// 好!
function myFunc2(param1, param2) {
return param1 + param2;
}
const result = myFunc2(1, 3);
return result + param;
}
出于同樣的原因，不建議在條件 (if) 和循環 ( while, for)中使用函數聲明：
// 不好!
if (myCondition) {
function myFunction(a, b) {
return a * b;
}
} else {
function myFunction(a, b) {
return a + b;
}
}
myFunction(2, 3);
使用函數表達式更好地執行有條件地創建函數。
3、函數表達式
當
function關鍵字在表達式內創建函數（有或沒有名稱）時，就是函數表達式。
以下是使用表達式創建的函數的示例：
const sum = (function sumB(a, b) {
return a + b;
});
const myObject = {
myMethod: function() {
return 42;
}
};
const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
console.log(number);
// logs 4
// logs 1
// logs 1
});在函數表達式中創建了兩種函數：
- 如果表達式中的函數沒有名稱，例如
function() { return 42 }，那么這是一個匿名函數表達式。 - 如果函數有名字，例如在前面的例子中的
sumB和callback，那么這是一個命名函數表達式。
函數表達式的注意事項
函數表達式非常適合作為條件創建的回調或函數：
// 有條件地創建函數
let callback;
if (true) {
callback = function() { return 42 };
} else {
callback = function() { return 3.14 };
}
// 作為回調使用函數
[1, 2, 3].map(function increment(number) {
return number + 1;
}); // => [2, 3, 4]
如果你創建了命名函數表達式，請注意函數變量僅在創建的函數范圍內可用：
const numbers = [4];
numbers.forEach(function callback(number) {
console.log(callback); // logs function() { ... }
});
console.log(callback); // ReferenceError: callback is not defined
callback是一個命名函數表達式，因此callback函數變量僅在callback()函數范圍內可用，而在外部不可用。
但是，如果將函數對象存儲到常規變量中，則可以在函數范圍內外從該變量訪問函數對象：
const callback = function(number) {
console.log(callback); // logs function() { ... }
};
const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }4、總結
根據你使用function關鍵字創建函數的方式，你可以通過兩種方式創建函數：函數聲明和函數表達式。
當你使用function關鍵字開始語句時是函數聲明，函數聲明對于創建獨立的通用函數很有用。
如果語句不以function關鍵字開頭，那么這是一個函數表達式，使用函數表達式創建的函數對于按條件創建回調或函數很有用。
相關文章
