函數聲明？函數表達式？我該怎麼選？！

咱們在平常開發中常常使用函數，聰明的你確定已經用的爐火純青了。function doStuff（）{}和（）=> {}是咱們成天輸入的字符。但它們有何不一樣，爲何使用另外一個呢？

*注：咱們這裏用的例子都是JavaScript

第一個不一樣：名稱

當你用一個名稱建立函數時，這是一個函數聲明。在函數表達式中能夠省略該名稱，使該函數「匿名」。

函數聲明：

function doStuff() {};

函數函數表達式：

const doStuff = function() {}

平常中咱們常常使用ES6建立函數表達式

const doStuff = ()={}

第二個不一樣：提高

提高是指函數和變量的提高，變量聲明和函數聲明提高至當前做用域的頂端，而後進行接下來的處理。

函數聲明會被提高但函數表達式不會。

咱們能夠經過例子來加深理解：

//函數聲明
doStuff();
function doStuff() { console.log('haha')};
複製代碼

結果：

看出來沒有任何問題。

看下一個例子

//函數表達式
doStuff();
const doStuff = () => {console.log('haha')};
複製代碼

看，這就報錯了。

函數表達式實際解析的過程是這樣的：

const doStuff;
doStuff();
doStuff = () => {console.log('haha')};
複製代碼

注：函數聲明提高的優先級比變量提高高。

使用函數表達式的狀況：

經過上面兩個例子，看起來函數聲明在提高方面比函數表達式有用的多。可是在他們兩個之間選擇的時候應該如何抉擇呢？

調用函數表達式能夠避免污染全局環境，由於你不知道你的程序有多少不一樣的函數，若是你使用函數表達式可能就會覆蓋了別人的函數，採用函數表達式，就會避免這些問題。

當即執行函數（IIFE）

IIFE - 當即調用函數表達式 - 就是字面意思。在建立函數後當即調用函數，使用IIFE，以下所示：

(function() => {})()
//或者
(() => {})()
複製代碼

回調（callback）

傳遞給另外一個函數的函數一般在JavaScript中稱爲「回調」。，以下所示：

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函數只有在他初始化以後才能使用

總結

簡而言之，若是要在全局範圍內建立函數並在整個代碼中使用它，請使用函數聲明。

使用函數表達式來限制函數的可用位置，保持全局環境的整潔乾淨。 ————————————————————————————————————————————————

放學別走！長按二維碼關注 【技術人生路】，無償免費獲取前端學習進階資料，培訓實戰視頻，就業指導等衆多福利哦。我相信咱們都是愛學習愛進步的呀！