JS 中的函數表達式和函數聲明你混淆了嗎？
在 JavaScript 中，function關鍵字可以完成一個簡單的工作：創建一個函數。但是，使用關鍵字定義函數的方式可以創建具有不同屬性的函數。
在本文中，我們來看一下，如何使用function關鍵字來定義函數聲明和函數表達式，以及這兩種函數之間的區別又是什么。
1.函數表達式vs函數聲明
函數聲明和函數表達式是使用 function 關鍵字創建函數的2種方法。
舉個例子來說明差異，我們創建兩個版本的 sums 函數：
- function sumA(a, b) {
- return a + b;
- }
- (function sumB(a, b) {
- return a + b;
- });
- sumA(1, 2); // ???
- sumB(1, 2); // ???
動手試試：https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/
一般情況，像往常一樣定義函數(sumA函數)。在另一種情況下，函數被放置在一對括號中(sumB函數)。
如果調用 sumA(1,2) 和 sumB(1,2) 會發生什么?
如預期的那樣，sumA(1, 2) 返回 3。但是，調用sumB(1, 2)會引發異常：Uncaught ReferenceError: sumB is not defined。
其原因是sumA是使用函數聲明創建的，該函數聲明在當前作用域中創建一個函數變量(具有與函數名稱相同的名稱)。但是sumB是使用函數表達式創建的(將其包裝在括號中)，該函數表達式不會在當前作用域內創建函數變量。
如果你想訪問使用函數表達式創建的函數，那么將函數對象保存到一個變量中：
- // Works!
- 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 declaration
- 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
動手試試：https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/
function sumArray(array) { ... } 是函數聲明。
包含函數對象的函數變量sumArray在當前作用域中可用：sumArray([10, [1, [5]]])之前和sumArray([1, [4, 6]])之后，函數聲明， 以及函數本身的作用域sumArray([1, [4, 6]])(允許遞歸調用)。
由于提升，函數變量在函數聲明之前可用。
2.1 函數聲明的注意事項
函數聲明語法的作用是創建獨立函數。函數聲明應在全局作用域內，或直接在其他函數的作用域內:
- // Good!
- function myFunc1(param1, param2) {
- return param1 + param2;
- }
- function bigFunction(param) {
- // Good!
- function myFunc2(param1, param2) {
- return param1 + param2;
- }
- const result = myFunc2(1, 3);
- return result + param;
- }
基于相同的原因，不建議在條件(if)和循環(while，for)中使用函數聲明：
- // Bad!
- if (myCondition) {
- function myFunction(a, b) {
- return a * b;
- }
- } else {
- function myFunction(a, b) {
- return a + b;
- }
- }
- myFunction(2, 3);
使用函數表達式更好地執行有條件地創建函數。
3.函數表達式
當function關鍵字在表達式內部創建函數(帶有或不帶有名稱)時，將出現函數表達式。
以下是使用表達式創建的函數的示例：
- // Function expressions
- 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和回調，那么這是一個命名函數表達式
3.1 函數表達式的注意事項
函數表達式適合作為條件創建的回調或函數：
- // Functions created conditionally
- let callback;
- if (true) {
- callback = function() { return 42 };
- } else {
- callback = function() { return 3.14 };
- }
- // Functions used as callbacks
- [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
試一試：https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/
callback是一個命名的函數表達式，因此callback函數變量僅在callback()函數使用域可用，而在外部則不可用。
但是，如果將函數對象存儲到常規變量中，則可以在函數作用域內外從該變量訪問函數對象：
- const callback = function(number) {
- console.log(callback); // logs function() { ... }
- };
- const numbers = [4];
- numbers.forEach(callback);
- console.log(callback); // logs function() { ... }
試一試：https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/
4. 總結
根據使用function關鍵字創建函數的方式，可以通過兩種方法來創建函數：函數聲明和函數表達式。
作者：Dmitri Pavlutin
譯者：前端小智 來源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-function-expressions-and-declarations/
