作者：Nilesh Sanyal
翻譯：瘋狂的技術宅
未經允許嚴禁轉載
JavaScript回撥函式是成為一名成功的 JavaScript 開發人員必須要了解的一個重要概念。但是我相信，在閱讀本文之後，你將能夠克服以前使用回撥方法遇到的所有障礙。
在開始之前，首先要確保我們對函式的理解是紮實的。
快速回顧：JavaScript 函式
什麼是函式？
函式是在其中有一組程式碼的邏輯構件，用來執行特定任務。實際上為了易於除錯和維護，函式允許以更有組織的方式去編寫程式碼。函式還允許程式碼重用。
你只需定義一次函式，然後在需要時去呼叫它，而不必一次又一次地編寫相同的程式碼。
宣告一個函式
現在，讓我們看看如何在 javascript 中宣告一個函式。
-
使用函式的建構函式： 在這種方法中，函式是在“函式”的建構函式的幫助下建立的。從技術上講，這種方法比使用函式表示式語法和函式宣告語句語法去宣告函式的方法效率要低。
-
使用函式表示式： 通常這種方法與變數分配相同。簡而言之，函式主體被視為一個表示式，並且該表示式被分配給一個變數。使用這種語法定義的函式可以是命名函式或匿名函式。
沒有名稱的函式被稱為匿名函式。匿名函式是自呼叫的，這意味著它會自動呼叫起自身。這種行為也稱為立即呼叫的函式表示式（IIFE）。
-
使用函式宣告： 這種方法是 JavaScript 中常用的老派方法。在關鍵字“function”之後，你必須指定函式的名稱。之後，如果函式接受多個引數或引數，也需要提及它們。雖然這部分是完全可選的。
在函式體中，函式必須將一個值返回給呼叫方。遇到 return 語句後，該函式將會停止執行。在函式內部，引數將會充當區域性變數。
同樣，在函式內部宣告的變數是該函式的區域性變數。區域性變數只能在該函式內訪問，因此具有相同名稱的變數可以輕鬆地用於不同的函式。
呼叫一個函式
在下列任何一種情況下，將呼叫之前宣告的函式：
-
發生事件時，例如，使用者單擊按鈕，或者使用者從下拉選單中選擇某些選項等等。
-
從 javascript 程式碼中呼叫該函式時。
-
該函式可以自動呼叫，我們已經在匿名函式表示式中進行了討論。
()運算子呼叫該函式。
什麼是回撥函式？
按照 MDN 的描述：回撥函式是作為引數傳給另一個函式的函式，然後通過在外部函式內部呼叫該回撥函式以完成某種操作。
讓我用人話解釋一下，回撥函式是一個函式，將會在另一個函式完成執行後立即執行。回撥函式是一個作為引數傳給另一個 JavaScript 函式的函式。這個回撥函式會在傳給的函式內部執行。
在 JavaScript 中函式被看作是一類物件。對於一類物件，我們的意思是指數字、函式或變數可以與語言中的其他實體相同。作為一類物件，可以將函式作為變數傳給其他函式，也可以從其他函式中返回這些函式。
可以執行這種操作的函式被稱為高階函式。回撥函式實際上是一種模式。 “模式”一詞表示解決軟體開發中常見問題的某種行之有效的方法。最好將回撥函式作為回撥模式去使用。
為什麼我們需要回撥
客戶端 JavaScript 在瀏覽器中執行，並且瀏覽器的主程式是單執行緒事件迴圈。如果我們嘗試在單執行緒事件迴圈中執行長時間執行的操作，則會阻止該過程。從技術上講這是不好的，因為過程在等待操作完成時會停止處理其他事件。
例如，alert 語句被視為瀏覽器中 javascript 中的阻止程式碼之一。如果執行 alert，則在關閉 alert 對話方塊視窗之前，你將無法在瀏覽器中進行任何互動。為了防止阻塞長時間執行的操作，我們使用了回撥。
讓我們深入研究一下，以便使你準確瞭解在哪種情況下使用回撥。
在上面的程式碼片段中，首先執行 getMessage()函式，然後執行 displayMessage() 。兩者都在瀏覽器的控制檯視窗中顯示了一條訊息，並且都立即執行。
在某些情況下，一些程式碼不會立即執行。例如，如果我們假設 getMessage() 函式執行 API 呼叫，則必須將請求傳送到伺服器並等待響應。這時我們應該如何處理呢？
如何使用回撥函式
我認為與其告訴你 JavaScript 回撥函式的語法，不如在前面的例子中實現回撥函式更好。修改後的程式碼段顯示在下面的截圖中。
為了使用回撥函式，我們需要執行某種無法立即顯示結果的任務。為了模擬這種行為，我們用 JavaScript 的 setTimeout() 函式。該函式會暫停兩秒鐘，然後在控制檯視窗中顯示訊息“ Hi，there”。
“顯示的訊息”將被顯示在瀏覽器的控制檯視窗中。在這種情況下，首先，我們需要等待 getMessage() 函式。成功執行此函式後，再執行 displayMessage() 函式。
回撥的工作方式
讓我解釋一下前面的例子在幕後發生的事。
從上一個例子可以看到，在 getMessage() 函式中，我們傳遞了兩個引數。第一個引數是 msg 變數，該變數顯示在瀏覽器的控制檯視窗中，第二個引數是回撥函式。
現在，你可能想知道為什麼將回撥函式作為引數進行傳遞 —— 要實現回撥函式，我們必須將一個函式作為引數傳給另一個函式。
在 getMessage() 完成任務後，我們將呼叫回撥函式。之後，當呼叫 getMessage() 函式時，將引用傳給displayMessage() 函式，該函式就是回撥函式。
注意，當呼叫 getMessage() 函式時，我們僅將其引用傳給 displayMessage() 函式。這就是為什麼你不會在它旁邊看到函式呼叫運算子，也就是() 符號。
Javascript 回撥是非同步的嗎？
JavaScript 被認為是單執行緒指令碼語言。單執行緒是指 JavaScript 一次執行一個程式碼塊。當 JavaScript 忙於執行一個塊時，它不可能移到下一個塊。
換句話說，我們可以認為 JavaScript 程式碼本質上總是阻塞的。但是這種阻塞性使我們無法在某些情況下編寫程式碼，因為在這些情況下我們沒有辦法在執行某些特定任務後立即得到結果。
我談論的任務包括以下情況：
- 通過對某些端點進行 API 呼叫來獲取資料。
- 通過傳送網路請求從遠端伺服器獲取一些資源（例如，文字檔案、影像檔案、二進位制檔案等）。
為了處理這些情況，必須編寫非同步程式碼，而回撥函式是處理這些情況的一種方法。所以從本質上上說，回撥函式是非同步的。
Javascript 回撥地獄
當多個非同步函式一個接一個地執行時，會產生回撥地獄。它也被稱為厄運金字塔。
假設你要獲取所有 Github 使用者的列表。然後在使用者中搜尋 JavaScript 庫的主要貢獻者。再然後，你想要在使用者中獲取姓名為 John 的人員的詳細資訊。
為了在回撥的幫助下實現這個功能，程式碼應該如下所示：
http.get('https://api.github.com/users', function(users) {
/* Display all users */
console.log(users);
http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
/* Display all top contributors */
console.log(contributors);
http.get('https://api.github.com/users/Jhon', function(userData) {
/* Display user with username 'Jhon' */
console.log(userData);
});
});
});
複製程式碼從上面的程式碼片段中，你可以看到程式碼變得更加難以理解，以及難以維護和修改。這是由回撥函式的巢狀而引發的。
如何避免回撥地獄？
可以使用多種技術來避免回撥地獄，如下所示。
- 使用promise
- 藉助 async-await
- 使用 async.js 庫
使用 Async.js 庫
讓我們談談怎樣用 async.js 庫避免回撥地獄。
根據 async.js 官方網站的描述：Async 是一個工具模組，它提供了直接、強大的函式來使用非同步 JavaScript。
Async.js 總共提供約 70 個函式。現在，我們將僅討論其中兩個，即 async.waterfall() 和 async.series()。
async.waterfall()
當你要一個接一個地執行某些任務，然後將結果從上一個任務傳到下一個任務時，這個函式非常有用。它需要一個函式“任務”陣列和一個最終的“回撥”函式，它會在“任務”陣列中所有的函式完成後，或者用錯誤物件呼叫“回撥”之後被呼叫。
var async = require('async');
async.waterfall([
function(callback) {
/*
Here, the first argument value is null, it indicates that
the next function will be executed from the array of functions.
If the value was true or any string then final callback function
will be executed, other remaining functions in the array
will not be executed.
*/
callback(null, 'one', 'two');
},
function(param1, param2, callback) {
// param1 now equals 'one' and param2 now equals 'two'
callback(null, 'three');
},
function(param1, callback) {
// param1 now equals 'three'
callback(null, 'done');
}
], function (err, result) {
/*
This is the final callback function.
result now equals 'done'
*/
});
複製程式碼async.series()
當你要執行一個函式然後在所有函式成功執行後需要獲取結果時，它很有用。 async.waterfall() 和 async.series() 之間的主要區別在於， async.series() 不會將資料從一個函式傳遞到另一個函式。
async.series([
function(callback) {
// do some stuff ...
callback(null, 'one');
},
function(callback) {
// do some more stuff ...
callback(null, 'two');
}
],
// optional callback
function(err, results) {
// results is now equal to ['one', 'two']
});
複製程式碼Javascript 回撥與閉包
閉包
用技術術語來說，閉包是捆綁在一起的函式的組合，引用了其周圍的狀態。
簡而言之，閉包允許從內部函式訪問外部函式的作用域。
要使用閉包，我們需要在一個函式內部定義另一個函式。然後，我們需要將其返回或傳給另一個函式。
回撥
從概念上講，回撥類似於閉包。回撥基本上是把一個函式作為另一個函式的用法。
最後的話
希望本文能消除你對 javascript 回撥函式的所有疑問。如果你覺得這篇文章有幫助，請與他人分享。
歡迎關注前端公眾號：前端先鋒，領取前端工程化實用工具包。
