回調(diào)函數(shù)相信大家并不陌生，但是對于女朋友來說比較陌生，要想給女朋友講明白回調(diào)函數(shù)是怎么回事，為什么要這樣設(shè)計(jì)，使用回調(diào)函數(shù)應(yīng)該注意什么，確實(shí)不容易，所以有了這篇文章。

在 JavaScript 中，我個(gè)人覺得理解回調(diào)函數(shù)，就有助于我們理解 JavaScript 中的其它設(shè)計(jì)，比如異步編程、消息循環(huán)、一些常用到的 Web API 以及 Node 中的異步，這些都與回調(diào)函數(shù)息息相關(guān)，所以咱們一步步的來學(xué)習(xí)和使用。

廢話不多說，直接上干貨!

[[348215]]

什么是回調(diào)函數(shù)?

回調(diào)函數(shù)也是函數(shù)的一種，回調(diào)函數(shù)與普通函數(shù)的區(qū)別在于它的調(diào)用時(shí)機(jī)。所謂的回調(diào)函數(shù)是把一個(gè)函數(shù)當(dāng)作另一個(gè)函數(shù)的參數(shù)，并在這個(gè)函數(shù)的某個(gè)時(shí)機(jī)進(jìn)行調(diào)用，我們就將這個(gè)傳入的函數(shù)稱為回調(diào)函數(shù)。

回調(diào)函數(shù)分為同步回調(diào)和異步回調(diào)。它倆的區(qū)別在于調(diào)用的位置不同。

1. 同步回調(diào)

所謂的同步回調(diào)函數(shù)是在執(zhí)行的函數(shù)內(nèi)部被調(diào)用的。舉個(gè)例子：

function fn(){ 
    console.log("我是同步回調(diào)函數(shù)"); 
} 
 
function bar(f){ 
     f(); 
} 
 
bar(fn); 

我們聲明了一個(gè)回調(diào)函數(shù) fn，我們傳入 bar 函數(shù)，我們在 bar 內(nèi)部調(diào)用了 fn，此時(shí)就是同步調(diào)用。

2. 異步回調(diào)

而異步回調(diào)函數(shù)是在執(zhí)行的函數(shù)外部被調(diào)用的。如下代碼：

function fn(){ 
    console.log("我是異步回調(diào)函數(shù)"); 
} 
 
settimeout(fn, 1000); 

上述代碼中，settimeout 的第一個(gè)參數(shù) fn 是傳入的一個(gè)回調(diào)函數(shù)，當(dāng)程序執(zhí)行 1000 ms 的時(shí)候，此時(shí)這個(gè)回調(diào)函數(shù)被調(diào)用，而且是在 setTimeout 函數(shù)外部被調(diào)用的，我們稱 fn 為異步回調(diào)函數(shù)。

JS 線程架構(gòu)

上述的問題理解起來非常簡單，尤其是同步回調(diào)函數(shù)。但是對于異步回調(diào)函數(shù)什么時(shí)候被調(diào)用的，是在什么位置被調(diào)用的，我們目前是非常模糊的。

所以要想知道異步回調(diào)函數(shù)的調(diào)用時(shí)機(jī)和位置，我們需要理解 JS 的線程架構(gòu)，比如消息隊(duì)列、事件循環(huán)，從根上理解 JS 是如何設(shè)計(jì)這些東西的。

JS 的最初設(shè)計(jì)是單線程的，所謂的單線程就是同一時(shí)間只能干一件事情，而且 JS 運(yùn)行的這個(gè)單線程就是頁面的 UI 線程，畢竟 JS 為了能夠更方便的操作 DOM 嘛。

那么問題來了，當(dāng)我們把 JS 設(shè)計(jì)到 UI 頁面線程，就會(huì)出現(xiàn)一個(gè)問題，當(dāng)用戶通過頁面交互產(chǎn)生一個(gè)事件時(shí)，如果當(dāng)前的線程正在處理其他的任務(wù)，那么這個(gè)交互事件需要等當(dāng)前 UI 線程的任務(wù)處理完畢才能被處理，所以這樣設(shè)計(jì)比較雞肋。

如果當(dāng)前 UI 線程一直執(zhí)行其他任務(wù)，那么這個(gè)用戶的交互事件任務(wù)一直不被處理，會(huì)出現(xiàn)頁面點(diǎn)擊無效的假象。

谷歌 V8 團(tuán)隊(duì)為了解決這個(gè)問題，那么就引入了消息隊(duì)列。

消息隊(duì)列

有了消息隊(duì)列，我們把所有產(chǎn)生的事件，無論是 JavaScript 產(chǎn)生的事件還是用戶點(diǎn)擊頁面交互產(chǎn)生的事件，都統(tǒng)一按照先后循序放到消息隊(duì)列中，那么 UI 線程就不斷的循環(huán)這個(gè)消息隊(duì)列，有任務(wù)就取出來去執(zhí)行。

有了消息隊(duì)列之后，這個(gè)主線程就可以有序的執(zhí)行各種事件任務(wù)了。

異步任務(wù)什么時(shí)候調(diào)用?

還是上述的 setTimeout 異步回調(diào)函數(shù)的例子，假如當(dāng)前線程在消息隊(duì)列中取出 setTimeout 這段代碼執(zhí)行，發(fā)現(xiàn) fn 這個(gè)任務(wù)是在 1000 ms 后執(zhí)行的，1000 ms 過后，主線程就會(huì)將 fn 封裝成一個(gè)事件任務(wù)扔到消息隊(duì)列中去等待被執(zhí)行。

等消息隊(duì)列中的執(zhí)行到一定的時(shí)機(jī)，就會(huì)取出這個(gè)被封裝過的 fn 回調(diào)函數(shù)任務(wù)，在主線程中被執(zhí)行。

這個(gè)理解起來并不是很難，但是有一類回調(diào)函數(shù)比較特殊。當(dāng)主線程在消息隊(duì)列中取出一個(gè)網(wǎng)絡(luò)下載的任務(wù)時(shí)，網(wǎng)絡(luò)下載比較耗時(shí)，我們不可能讓它在主線程中阻塞其他任務(wù)執(zhí)行，所以主線程就會(huì)交給網(wǎng)絡(luò)線程去執(zhí)行這個(gè)下載任務(wù)，然后主線程回繼續(xù)有序的在消息隊(duì)列中取出其他任務(wù)執(zhí)行。

此時(shí)網(wǎng)絡(luò)線程會(huì)接受到這個(gè)任務(wù)執(zhí)行下載操作，當(dāng)網(wǎng)絡(luò)線程把文件下載完畢之后，就將下載的結(jié)果封裝成一個(gè)事件任務(wù)，放入到消息隊(duì)列中。當(dāng)主線程執(zhí)行到這個(gè)任務(wù)時(shí)，就知道網(wǎng)絡(luò)線程已經(jīng)下載完了，然后將下載的結(jié)果呈現(xiàn)給用戶。

最后

好了，今天主要和大家分享了 JavaScript 中回調(diào)函數(shù)的由來和異步回調(diào)函數(shù)的設(shè)計(jì)，這也是 V8 引擎中的一小部分，接下來會(huì)通過這樣一個(gè)個(gè)的知識(shí)點(diǎn)，挖掘 V8 谷歌引擎的各個(gè)方面的優(yōu)秀設(shè)計(jì)方案。