【譯】函數聲明 VS 函數表達式

可能你已經知道有好幾種方式來編寫一個函數。咱們成天都會編寫諸如function doStuff() {} () => {}這樣的代碼。可是你知道它們之間的差別或者爲何使用特定的方式來編寫函數嗎？

注意：全部例子都使用 javascript 來編寫。

差別一：name

當你建立一個具名函數，這就是函數聲明。函數表達式能夠省略 name，使之成爲匿名函數。

函數聲明

function doStuff() {}
複製代碼

函數表達式

const doStuff = function() {};
複製代碼

或者 ES6 中新增的箭頭函數：

const doStuff = () => {};
複製代碼

提高

提高表示你的函數和變量能夠在做用域一開始的部分就能被使用，而不是僅在它們被建立以後。它們在編譯時初始化，在文件中的任何位置使用。

譯者：結合下面的代碼能夠更好的理解提高的概念。

foo(); // hello
function foo() {
  console.log('hello');
}

console.log(num); // undefined
var num = 1;
console.log(num); // 1
複製代碼

函數聲明存在提高而函數表達式不會。

舉例更容易說明問題：

doStuff();
function doStuff() {}
複製代碼

上面的代碼能正常運行，但下面的代碼不會：

doStuff();
const doStuff = () => {};
複製代碼

使用函數表達式的狀況

看起來好像由於函數聲明的提高特性，讓函數表達式變得沒有什麼用處了。可是須要考慮函數會在什麼時候何地被使用才能決定使用聲明或者表達式。

函數表達式能夠有效的避免污染全局做用域。比起你的代碼中充斥着各類各樣的具名函數，匿名函數可讓你使用後當即丟棄掉。

IIFE

當即執行的函數表達式。從名字就能夠知道它的做用了。函數同時被建立和調用，你能夠這樣使用 IIFE：

(function() => {})();
複製代碼

或者

(() => {})();
複製代碼

若是想深刻了解，能夠查看這篇文章。

回調函數

做爲參數傳入其餘函數的函數一般被稱爲回調函數。例子：

function mapAction(item) {
  // do stuff to an item
}
array.map(mapAction);
複製代碼

這裏的問題是mapAction會在你整個程序中均可用——但這沒有必要。若是是一個函數表達式，它在使用它的函數以外就不可用了。

array.map(item => { //do stuff to an item })
複製代碼

或者

const mapAction = function(item) {
  // do stuff to an item
};
array.map(mapAction);
複製代碼

固然這裏的mapAction在初始化它的代碼以後仍然可用。

小結

**簡單地說，若是你想在讓函數全局通用，在全局做用域上使用函數聲明建立函數。**使用函數表達式限制函數的可用範圍，保持全局做用域不被污染，也讓代碼更爲簡潔。

參考

• Function declaration, MDN docs.
• Function expression, MDN docs.
• Hoisting, MDN glossary.

原文連接

• When to use a function declaration vs. a function expression