JS 中的函數表達式和函數聲明你混淆了嗎？

做者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

在 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關鍵字建立函數的方式，能夠經過兩種方法來建立函數：函數聲明和函數表達式。

留個問題： function sum(a, b) { return a + b } + 1 是函數聲明仍是函數表達式，能夠在留言中說出你的答案。

---

編輯中可能存在的bug無法實時知道，過後爲了解決這些bug,花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/javascript-function-expressions-and-declarations/

交流

文章每週持續更新，能夠微信搜索【大遷世界 】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。