本文的目錄：

• 什么是回調(diào)或高級函數(shù)
• 回調(diào)函數(shù)是如何實現(xiàn)的
• 實現(xiàn)回調(diào)函數(shù)的基本原則
• 回調(diào)地獄的問題和解決方案
• 實現(xiàn)自己的回調(diào)函數(shù)

在JavaScrip中，function是內(nèi)置的類對象，也就是說它是一種類型的對象，可以和其它String、Array、Number、Object類的對象一樣用于內(nèi)置對象的管理。因為function實際上是一種對象，它可以“存儲在變量中，通過參數(shù)傳遞給(別一個)函數(shù)(function)，在函數(shù)內(nèi)部創(chuàng)建，從函數(shù)中返回結(jié)果值”。

因為function是內(nèi)置對象，我們可以將它作為參數(shù)傳遞給另一個函數(shù)，延遲到函數(shù)中執(zhí)行，甚至執(zhí)行后將它返回。這是在JavaScript中使用回調(diào)函數(shù)的精髓。本篇文章的剩余部分將全面學習JavaScript的回調(diào)函數(shù)?；卣{(diào)函數(shù)也許是JavaScript中使用最廣泛的功能性編程技術(shù)，也許僅僅一小段JavaScript或jQuery的代碼都會給開發(fā)者留下一種神秘感，閱讀這篇文章后，也許會幫你消除這種神秘感。
回調(diào)函數(shù)來自一種著名的編程范式——函數(shù)式編程，在基本層面上，函數(shù)式編程指定的了函數(shù)的參數(shù)。函數(shù)式編程雖然現(xiàn)在的使用范圍變小了，但它一直被“專業(yè)的聰明的”程序員看作是一種難懂的技術(shù)，以前是這樣，未來也將是如此。

幸運的是，函數(shù)式編程已經(jīng)被闡述的像你我這樣的一般人也能理解和使用。函數(shù)式編程最主要的技術(shù)之一就是回調(diào)函數(shù)，你很快會閱讀到，實現(xiàn)回調(diào)函數(shù)就像傳遞一般的參數(shù)變量一樣簡單。這項技術(shù)如此的簡單，以至于我都懷疑為什么它經(jīng)常被包含在JavaScript的高級話題中去。

一、什么是回調(diào)或高級函數(shù)?

回調(diào)函數(shù)被認為是一種高級函數(shù)，一種被作為參數(shù)傳遞給另一個函數(shù)(在這稱作"otherFunction")的高級函數(shù)，回調(diào)函數(shù)會在otherFunction內(nèi)被調(diào)用(或執(zhí)行)?；卣{(diào)函數(shù)的本質(zhì)是一種模式(一種解決常見問題的模式)，因此回調(diào)函數(shù)也被稱為回調(diào)模式。

思考一下下面這種在jQuery中常用的回調(diào)函數(shù)：

//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
 alert("Btn 1 Clicked");
});

正如在前面的例子所看到的，我們傳遞了一個函數(shù)給click方法的形參，click方法將會調(diào)用(或執(zhí)行)我們傳遞給它的回調(diào)函數(shù)。這個例子就給出了JavaScript中使用回調(diào)函數(shù)的一個典型方式，并廣泛應(yīng)用于jQuery中。

細細體味一下另一個基本JavaScript的典型例子：

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

我們再一次用同樣的方式傳遞了一個匿名的函數(shù)(沒有函數(shù)名的函數(shù))給forEach方法，作為forEach的參數(shù)。

到目前為止，我們傳遞了一個匿名的函數(shù)作為參數(shù)給另一個函數(shù)或方法。在看其它更復(fù)雜的回調(diào)函數(shù)之前，讓我們理解一下回調(diào)的工作原理并實現(xiàn)一個自己的回調(diào)函數(shù)。

二、回調(diào)函數(shù)是如何實現(xiàn)的？

我們可以像使用變量一樣使用函數(shù)，作為另一個函數(shù)的參數(shù)，在另一個函數(shù)中作為返回結(jié)果，在另一個函數(shù)中調(diào)用它。當我們作為參數(shù)傳遞一個回調(diào)函數(shù)給另一個函數(shù)時，我們只傳遞了這個函數(shù)的定義，并沒有在參數(shù)中執(zhí)行它。

當包含(調(diào)用)函數(shù)擁有了在參數(shù)中定義的回調(diào)函數(shù)后，它可以在任何時候調(diào)用(也就是回調(diào))它。

這說明回調(diào)函數(shù)并不是立即執(zhí)行，而是在包含函數(shù)的函數(shù)體內(nèi)指定的位置“回調(diào)”它(形如其名)。所以，即使第一個jQuery的例子看起來是這樣：

//The anonymous function is not being executed there in the parameter. 
//The item is a callback function
$("#btn_1").click(function() {
 alert("Btn 1 Clicked");
});

匿名函數(shù)將延遲在click函數(shù)的函數(shù)體內(nèi)被調(diào)用，即使沒有名稱，也可以被包含函數(shù)通過 arguments對象訪問。

回調(diào)函數(shù)是閉包的
當作為參數(shù)傳遞一個回調(diào)函數(shù)給另一個函數(shù)時，回調(diào)函數(shù)將在包含函數(shù)函數(shù)體內(nèi)的某個位置被執(zhí)行，就像回調(diào)函數(shù)在包含函數(shù)的函數(shù)體內(nèi)定義一樣。這意味著回調(diào)函數(shù)是閉包的，想更多地了解閉包，請參考作者另一個貼子Understand JavaScript Closures With Ease。從所周知，閉包函數(shù)可以訪問包含函數(shù)的作用域，所以，回調(diào)函數(shù)可以訪問包含函數(shù)的變量，甚至是全局變量。

三、實現(xiàn)回調(diào)函數(shù)的基本原則

簡單地說，自己實現(xiàn)回調(diào)函數(shù)的時候需要遵循幾條原則。

1、使用命名函數(shù)或匿名函數(shù)作為回調(diào)
在前面的jQuery和forEach的例子中，我們在包含函數(shù)的參數(shù)中定義匿名函數(shù)，這是使用回調(diào)函數(shù)的通用形式之一，另一個經(jīng)常被使用的形式是定義一個帶名稱的函數(shù)，并將函數(shù)名作為參數(shù)傳遞給另一個函數(shù)，例如：


// global variable
var allUserData = [];

// generic logStuff function that prints to console
function logStuff (userData) {
  if ( typeof userData === "string")
  {
    console.log(userData);
  }
  else if ( typeof userData === "object")
  {
    for (var item in userData) {
      console.log(item + ": " + userData[item]);
    }

  }

}

// A function that takes two parameters, the last one a callback function
function getInput (options, callback) {
  allUserData.push (options);
  callback (options);

}

// When we call the getInput function, we pass logStuff as a parameter.
// So logStuff will be the function that will called back (or executed) inside the getInput function
getInput ({name:"Rich", speciality:"JavaScript"}, logStuff);
// name: Rich
// speciality: JavaScript

2、傳遞參數(shù)給回調(diào)函數(shù)
因為回調(diào)函數(shù)在執(zhí)行的時候就和一般函數(shù)一樣，我們可以傳遞參數(shù)給它?？梢詫瘮?shù)的任何屬性(或全局的屬性)作為參數(shù)傳遞回調(diào)函數(shù)。在上一個例子中，我們將包含函數(shù)的options作為參數(shù)傳遞給回調(diào)函數(shù)。下面的例子讓我們傳遞一個全局變量或本地變量給回調(diào)函數(shù)：

//Global variable
var generalLastName = "Clinton";

function getInput (options, callback) {
  allUserData.push (options);
// Pass the global variable generalLastName to the callback function
  callback (generalLastName, options);
}

3、在執(zhí)行之前確保回調(diào)是一個函數(shù)
在調(diào)用之前，確保通過參數(shù)傳遞進來的回調(diào)是一個需要的函數(shù)通常是明智的。此外，讓回調(diào)函數(shù)是可選的也是一個好的實踐。

讓我們重構(gòu)一下上面例子中的getInput函數(shù)，確保回調(diào)函數(shù)做了適當?shù)臋z查。

function getInput(options, callback) {
  allUserData.push(options);

  // Make sure the callback is a function
  if (typeof callback === "function") {
  // Call it, since we have confirmed it is callable
    callback(options);
  }
}

如果getInput函數(shù)沒有做適當?shù)臋z查(檢查callback是否是函數(shù)，或是否通過參數(shù)傳遞進來了),我們的代碼將會導(dǎo)致運行時錯誤。

4、使用含有this對象的回調(diào)函數(shù)的問題
當回調(diào)函數(shù)是一個含有this對象的方法時，我們必須修改執(zhí)行回調(diào)函數(shù)的方法以保護this對象的內(nèi)容。否則this對象將會指向全局的window對象(如果回調(diào)函數(shù)傳遞給了全局函數(shù))，或指向包含函數(shù)。讓我們看看下面的代碼：

// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
  id: 094545,
  fullName: "Not Set",
  // setUserName is a method on the clientData object
  setUserName: function (firstName, lastName) {
    // this refers to the fullName property in this object
   this.fullName = firstName + " " + lastName;
  }
}

function getUserInput(firstName, lastName, callback) {
  // Do other stuff to validate firstName/lastName here

  // Now save the names
  callback (firstName, lastName);
}

在下面的示例代碼中，當clientData.setUserName被執(zhí)行時，this.fullName不會設(shè)置clientData 對象中的屬性fullName，而是設(shè)置window 對象中的fullName，因為getUserInput是一個全局函數(shù)。出現(xiàn)這種現(xiàn)象是因為在全局函數(shù)中this對象指向了window對象。

getUserInput ("Barack", "Obama", clientData.setUserName);

console.log (clientData.fullName);// Not Set

// The fullName property was initialized on the window object
console.log (window.fullName); // Barack Obama

5、使用Call或Apply函數(shù)保護this對象

我們可以通過使用 Call 或 Apply函數(shù)來解決前面示例中的問題。到目前為止，我們知道JavaScript中的每一個函數(shù)都有兩個方法:Call和Apply。這些方法可以被用來在函數(shù)內(nèi)部設(shè)置this對象的內(nèi)容，并內(nèi)容傳遞給函數(shù)參數(shù)指向的對象。

Call takes the value to be used as the this object inside the function as the first parameter, and the remaining arguments to be passed to the function are passed individually (separated by commas of course). The Apply function's first parameter is also the value to be used as the thisobject inside the function, while the last parameter is an array of values (or the arguments object) to pass to the function.  (該段翻譯起來太拗口了，放原文自己體會)

這聽起來很復(fù)雜，但讓我們看看Apply和Call的使用是多么容易。為解決前面例子中出現(xiàn)的問題，我們使用Apply函數(shù)如下：

//Note that we have added an extra parameter for the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback, callbackObj) {
  // Do other stuff to validate name here

  // The use of the Apply function below will set the this object to be callbackObj
  callback.apply (callbackObj, [firstName, lastName]);
}

通過Apply函數(shù)正確地設(shè)置this對象，現(xiàn)在我們可以正確地執(zhí)行回調(diào)函數(shù)并它正確地設(shè)置clientData對象中的fullName屬性。

// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object

getUserInput ("Barack", "Obama", clientData.setUserName, clientData);

// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama

我們也可以使用Call 函數(shù)，但在本例中我們使用的Apply 函數(shù)。

6、多重回調(diào)函數(shù)也是允許的
我們可以傳遞多個回調(diào)函數(shù)給另一個函數(shù)，就像傳遞多個變量一樣。這是使用jQuery的AJAX函數(shù)的典型例子：

function successCallback() {
  // Do stuff before send
}

function successCallback() {
  // Do stuff if success message received
}

function completeCallback() {
  // Do stuff upon completion
}

function errorCallback() {
  // Do stuff if error received
}

$.ajax({
  url:"http://fiddle.jshell.net/favicon.png",
  success:successCallback,
  complete:completeCallback,
  error:errorCallback

});

四、“回調(diào)地獄”的問題和解決方案

異步代碼執(zhí)行是一種簡單的以任意順序執(zhí)行的方式，有時是很常見的有很多層級的回調(diào)函數(shù)，你看起來像下面這樣的代碼。下面這種凌亂的代碼稱作“回調(diào)地獄”，因為它是一種包含非常多的回調(diào)的麻煩的代碼。我是在node-mongodb-native里看到這個例子的，MongoDB驅(qū)動Node.js.示例代碼就像這樣：

var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
  p_client.dropDatabase(function(err, done) {
    p_client.createCollection('test_custom_key', function(err, collection) {
      collection.insert({'a':1}, function(err, docs) {
        collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
          cursor.toArray(function(err, items) {
            test.assertEquals(1, items.length);

            // Let's close the db
            p_client.close();
          });
        });
      });
    });
  });
});

你不太可能在自己的代碼里碰到這個的問題，但如果你碰到了(或以后偶然碰到了)，那么有以下兩種方式解決這個問題。

命名并定義你的函數(shù)，然后傳遞函數(shù)名作為回調(diào)，而不是在主函數(shù)的參數(shù)列表里定義一個匿名函數(shù)。
模塊化：把你的代碼劃分成一個個模塊，這樣你可以空出一部分代碼塊做特殊的工作。然后你可以將這個模型引入到你的大型應(yīng)用程序中。

五、實現(xiàn)自己的回調(diào)函數(shù)

現(xiàn)在你已經(jīng)完全理解(我相信你已經(jīng)理解了，如果沒有請快速重新閱讀一遍)了JavaScript關(guān)于回調(diào)的所用特性并且看到回調(diào)的使用是如此簡單但功能卻很強大。你應(yīng)該看看自己的代碼是否有機會使用回調(diào)函數(shù)，有以下需求時你可以考慮使用回調(diào)：

• 避免重復(fù)代碼 (DRY—Do Not Repeat Yourself)
• 在你需要更多的通用功能的地方更好地實現(xiàn)抽象(可處理各種類型的函數(shù))。
• 增強代碼的可維護性
• 增強代碼的可讀性
• 有更多定制的功能
  

實現(xiàn)自己的回調(diào)函數(shù)很簡單，在下面的例子中，我可以創(chuàng)建一個函數(shù)完成所用的工作：獲取用戶數(shù)據(jù)，使用用戶數(shù)據(jù)生成一首通用的詩，使用用戶數(shù)據(jù)來歡迎用戶，但這個函數(shù)將會是一個凌亂的函數(shù)，到處是if/else的判斷，甚至會有很多的限制并無法執(zhí)行應(yīng)用程序可能需要的處理用戶數(shù)據(jù)的其它函數(shù)。

替而代之的是我讓實現(xiàn)增加了回調(diào)函數(shù)，這樣主函數(shù)獲取用戶數(shù)據(jù)后可以傳遞用戶全名和性別給回調(diào)函數(shù)的參數(shù)并執(zhí)行回調(diào)函數(shù)以完成任何任務(wù)。

簡而言之，getUserInput函數(shù)是通用的，它可以執(zhí)行多個擁有各種功能的回調(diào)函數(shù)。

// First, setup the generic poem creator function; it will be the callback function in the getUserInput function below.
function genericPoemMaker(name, gender) {
  console.log(name + " is finer than fine wine.");
  console.log("Altruistic and noble for the modern time.");
  console.log("Always admirably adorned with the latest style.");
  console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}

//The callback, which is the last item in the parameter, will be our genericPoemMaker function we defined above.
function getUserInput(firstName, lastName, gender, callback) {
  var fullName = firstName + " " + lastName;

  // Make sure the callback is a function
  if (typeof callback === "function") {
  // Execute the callback function and pass the parameters to it
  callback(fullName, gender);
  }
}

調(diào)用getUserInput函數(shù)并傳遞genericPoemMaker函數(shù)作為回調(diào)：

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Output
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/

因為getUserInput 函數(shù)只處理用戶數(shù)據(jù)的輸入，我們可以傳遞任何回調(diào)函數(shù)給它。例如我們可以像這樣傳遞一個greetUser函數(shù)。

function greetUser(customerName, sex) {
  var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
 console.log("Hello, " + salutation + " " + customerName);
}

// Pass the greetUser function as a callback to getUserInput
getUserInput("Bill", "Gates", "Man", greetUser);

// And this is the output
Hello, Mr. Bill Gates

和上一個例子一樣，我們調(diào)用了同一個getUserInput 函數(shù)，但這次卻執(zhí)行了完全不同的任務(wù)。

如你所見，回調(diào)函數(shù)提供了廣泛的功能。盡管前面提到的例子非常簡單，在你開始使用回調(diào)函數(shù)的時候思考一下你可以節(jié)省多少工作，如何更好地抽象你的代碼。加油吧！在早上起來時想一想，在晚上睡覺前想一想，在你休息時想一想……

我們在JavaScript中經(jīng)常使用回調(diào)函數(shù)時注意以下幾點，尤其是現(xiàn)在的web應(yīng)用開發(fā)，在第三方庫和框架中

• 異步執(zhí)行(例如讀文件，發(fā)送HTTP請求)
• 事件監(jiān)聽和處理
• 設(shè)置超時和時間間隔的方法
• 通用化：代碼簡潔

以上就是更加深入的學習了JavaScript的回調(diào)函數(shù)，希望對大家的學習有所幫助。