在JavaScript中，函數(shù)聲明和函數(shù)表達(dá)式都是使用function關(guān)鍵字來(lái)創(chuàng)建函數(shù)的，是不是覺得它們很像，很容易混淆。下面本篇文章就來(lái)帶大家分析一下函數(shù)表達(dá)式和函數(shù)聲明，介紹一下函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別。

在 JavaScript 中，function關(guān)鍵字可以完成一個(gè)簡(jiǎn)單的工作：創(chuàng)建一個(gè)函數(shù)。 但是，使用關(guān)鍵字定義函數(shù)的方式可以創(chuàng)建具有不同屬性的函數(shù)。

在本文中，我們來(lái)看一下，如何使用function關(guān)鍵字來(lái)定義函數(shù)聲明和函數(shù)表達(dá)式，以及這兩種函數(shù)之間的區(qū)別又是什么。

1.函數(shù)表達(dá)式vs函數(shù)聲明

函數(shù)聲明和函數(shù)表達(dá)式是使用 function 關(guān)鍵字創(chuàng)建函數(shù)的2種方法。

舉個(gè)例子來(lái)說明差異，我們創(chuàng)建兩個(gè)版本的 sums 函數(shù)：

function sumA(a, b) {   return a + b; }  (function sumB(a, b) {   return a + b; });  sumA(1, 2); // ??? sumB(1, 2); // ???

動(dòng)手試試：https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/

一般情況，像往常一樣定義函數(shù)(sumA函數(shù))。在另一種情況下，函數(shù)被放置在一對(duì)括號(hào)中(sumB函數(shù))。

如果調(diào)用 sumA(1,2) 和 sumB(1,2) 會(huì)發(fā)生什么？

如預(yù)期的那樣，sumA(1, 2) 返回 3。但是，調(diào)用sumB(1, 2)會(huì)引發(fā)異常：Uncaught ReferenceError: sumB is not defined。

其原因是sumA是使用函數(shù)聲明創(chuàng)建的，該函數(shù)聲明在當(dāng)前作用域中創(chuàng)建一個(gè)函數(shù)變量（具有與函數(shù)名稱相同的名稱）。 但是sumB是使用函數(shù)表達(dá)式創(chuàng)建的（將其包裝在括號(hào)中），該函數(shù)表達(dá)式不會(huì)在當(dāng)前作用域內(nèi)創(chuàng)建函數(shù)變量。

如果你想訪問使用函數(shù)表達(dá)式創(chuàng)建的函數(shù)，那么將函數(shù)對(duì)象保存到一個(gè)變量中：

// Works! const sum = (function sumB(a, b) {   return a + b; });  sum(1, 2); // => 3

如果語(yǔ)句以`function`關(guān)鍵字開頭，則為函數(shù)聲明，否則為函數(shù)表達(dá)式。

// 函數(shù)聲明：以`function`關(guān)鍵字開頭 function sumA(a, b) {   return a + b; }  // 函數(shù)表達(dá)式：不以`function`關(guān)鍵字開頭 const mySum = (function sumB(a, b) {   return a + b; });  // 函數(shù)表達(dá)式：不以`function`關(guān)鍵字開頭 [1, 2, 3].reduce(function sum3(acc, number) {    return acc + number  });

從更高的角度來(lái)看，函數(shù)聲明對(duì)于創(chuàng)建獨(dú)立函數(shù)很有用，但是函數(shù)表達(dá)式可以用作回調(diào)。

現(xiàn)在，我們更深入地研究函數(shù)聲明和函數(shù)表達(dá)式的行為。

2.函數(shù)聲明

在前面的示例中已經(jīng)看到的，sumA是一個(gè)函數(shù)聲明:

// Function declaration function sumA(a, b) {   return a + b; }  sumA(4, 5); // => 9

當(dāng)一個(gè)語(yǔ)句包含function關(guān)鍵字，后跟函數(shù)名稱，一對(duì)帶參數(shù)的括號(hào)(param1, param2, paramN)以及包圍在一對(duì)花括號(hào){}中的函數(shù)主體時(shí)，就會(huì)發(fā)生函數(shù)聲明。

函數(shù)聲明會(huì)創(chuàng)建一個(gè)函數(shù)變量：一個(gè)與函數(shù)名稱同名的變量（例如，上一個(gè)示例中的sumA）。 在當(dāng)前作用域中（在函數(shù)聲明之前和之后），甚至在函數(shù)作用域本身內(nèi)，都可以訪問該函數(shù)變量。

函數(shù)變量通常用于調(diào)用函數(shù)或?qū)⒑瘮?shù)對(duì)象傳遞給其他函數(shù)（傳遞給高階函數(shù)）。

例如，編寫一個(gè)函數(shù) sumArray(array)，以遞歸方式累加一個(gè)數(shù)組的項(xiàng)（該數(shù)組可以包含數(shù)字或其他數(shù)組）：

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

動(dòng)手試試：https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/

function sumArray(array) { ... } 是函數(shù)聲明。

包含函數(shù)對(duì)象的函數(shù)變量sumArray在當(dāng)前作用域中可用：sumArray([10, [1, [5]]])之前和sumArray([1, [4, 6]])之后，函數(shù)聲明， 以及函數(shù)本身的作用域sumArray([1, [4, 6]])（允許遞歸調(diào)用）。

由于提升，函數(shù)變量在函數(shù)聲明之前可用。

2.1 函數(shù)聲明的注意事項(xiàng)

函數(shù)聲明語(yǔ)法的作用是創(chuàng)建獨(dú)立函數(shù)。 函數(shù)聲明應(yīng)在全局作用域內(nèi)，或直接在其他函數(shù)的作用域內(nèi):

// 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）和循環(huán)（while，for）中使用函數(shù)聲明：

// Bad! if (myCondition) {   function myFunction(a, b) {     return a * b;   } } else {   function myFunction(a, b) {     return a + b;   } }  myFunction(2, 3);

使用函數(shù)表達(dá)式更好地執(zhí)行有條件地創(chuàng)建函數(shù)。

3.函數(shù)表達(dá)式

當(dāng)function關(guān)鍵字在表達(dá)式內(nèi)部創(chuàng)建函數(shù)（帶有或不帶有名稱）時(shí)，將出現(xiàn)函數(shù)表達(dá)式。

以下是使用表達(dá)式創(chuàng)建的函數(shù)的示例：

// 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 });

在函數(shù)表達(dá)式中創(chuàng)建了兩種函數(shù):

• 如果表達(dá)式中的函數(shù)沒有名稱，例如 function（）{return 42}，那是一個(gè)匿名函數(shù)表達(dá)式
• 如果函數(shù)具有名稱，例如 上一個(gè)示例中的sumB和回調(diào)，那么這是一個(gè)命名函數(shù)表達(dá)式

3.1 函數(shù)表達(dá)式的注意事項(xiàng)

函數(shù)表達(dá)式適合作為條件創(chuàng)建的回調(diào)或函數(shù)：

// 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]

如果已創(chuàng)建命名函數(shù)表達(dá)式，請(qǐng)注意，該函數(shù)變量?jī)H在創(chuàng)建的函數(shù)作用域內(nèi)可用:

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是一個(gè)命名的函數(shù)表達(dá)式，因此callback函數(shù)變量?jī)H在callback()函數(shù)使用域可用，而在外部則不可用。

但是，如果將函數(shù)對(duì)象存儲(chǔ)到常規(guī)變量中，則可以在函數(shù)作用域內(nèi)外從該變量訪問函數(shù)對(duì)象：

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. 總結(jié)

根據(jù)使用function關(guān)鍵字創(chuàng)建函數(shù)的方式，可以通過兩種方法來(lái)創(chuàng)建函數(shù)：函數(shù)聲明和函數(shù)表達(dá)式。

留個(gè)問題： function sum(a, b) { return a + b } + 1 是函數(shù)聲明還是函數(shù)表達(dá)式，可以在留言中說出你的答案。