我們?cè)谌粘ｉ_(kāi)發(fā)中經(jīng)常使用函數(shù)，聰明的你肯定已經(jīng)用的爐火純青了。function doStuff（）{}和（）=> {}是我們整天輸入的字符。但它們有何不同，為什么使用另一個(gè)呢？

*注：我們這里用的例子都是JavaScript

第一個(gè)不同：名稱

當(dāng)你用一個(gè)名稱創(chuàng)建函數(shù)時(shí)，這是一個(gè)函數(shù)聲明。在函數(shù)表達(dá)式中可以省略該名稱，使該函數(shù)“匿名”。

函數(shù)聲明：

function doStuff() {};

函數(shù)函數(shù)表達(dá)式：

const doStuff = function() {}

日常中我們經(jīng)常使用ES6創(chuàng)建函數(shù)表達(dá)式

const doStuff = ()={}

第二個(gè)不同：提升

提升是指函數(shù)和變量的提升，變量聲明和函數(shù)聲明提升至當(dāng)前作用域的頂端，然后進(jìn)行接下來(lái)的處理。

函數(shù)聲明會(huì)被提升但函數(shù)表達(dá)式不會(huì)。

我們可以通過(guò)例子來(lái)加深理解：

//函數(shù)聲明
doStuff();
function doStuff() { console.log('haha')};

結(jié)果：

image

看出來(lái)沒(méi)有任何問(wèn)題。

看下一個(gè)例子

//函數(shù)表達(dá)式
doStuff();
const doStuff = () => {console.log('haha')};

image

看，這就報(bào)錯(cuò)了。

函數(shù)表達(dá)式實(shí)際解析的過(guò)程是這樣的：

const doStuff;
doStuff();
doStuff = () => {console.log('haha')};

注：函數(shù)聲明提升的優(yōu)先級(jí)比變量提升高。

使用函數(shù)表達(dá)式的情況：

通過(guò)上面兩個(gè)例子，看起來(lái)函數(shù)表達(dá)式在提升方面比函數(shù)表達(dá)式有用的多。但是在他們兩個(gè)之間選擇的時(shí)候應(yīng)該如何抉擇呢？

調(diào)用函數(shù)表達(dá)式可以避免污染全局環(huán)境，因?yàn)槟悴恢滥愕某绦蛴卸嗌俨煌暮瘮?shù)，如果你使用函數(shù)表達(dá)式可能就會(huì)覆蓋了別人的函數(shù)，采用函數(shù)表達(dá)式，就會(huì)避免這些問(wèn)題。

立即執(zhí)行函數(shù)（IIFE）

IIFE - 立即調(diào)用函數(shù)表達(dá)式 - 就是字面意思。在創(chuàng)建函數(shù)后立即調(diào)用函數(shù)，使用IIFE，如下所示：

(function() => {})()
//或者
(() => {})()

回調(diào)（callback）

傳遞給另一個(gè)函數(shù)的函數(shù)通常在JavaScript中稱為“回調(diào)”。，如下所示：

function mapAction(item) {
  // do stuff to an item
}
array.map(mapAction)

這里的問(wèn)題是mapAction可用于整個(gè)應(yīng)用程序- 其實(shí)沒(méi)有必要。如果該回調(diào)是一個(gè)函數(shù)表達(dá)式，它在函數(shù)外就不可用了：

array.map(item => { //do stuff to an item })
//或者
const mapAction = function(item) {
  // do stuff to an item
}
array.map(mapAction)

雖然mapAction函數(shù)只有在他初始化之后才能使用

總結(jié)

簡(jiǎn)而言之，如果要在全局范圍內(nèi)創(chuàng)建函數(shù)并在整個(gè)代碼中使用它，請(qǐng)使用函數(shù)聲明。

使用函數(shù)表達(dá)式來(lái)限制函數(shù)的可用位置，保持全局環(huán)境的整潔干凈。
————————————————————————————————————————————————

放學(xué)別走！長(zhǎng)按二維碼關(guān)注 【技術(shù)人生路】，無(wú)償免費(fèi)獲取前端學(xué)習(xí)進(jìn)階資料，培訓(xùn)實(shí)戰(zhàn)視頻，就業(yè)指導(dǎo)等眾多福利哦。我相信我們都是愛(ài)學(xué)習(xí)愛(ài)進(jìn)步的呀！

image