JavaScript中回調函數的使用方法

這篇文章主要介紹了JavaScript中回調函數的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

在JavaScript中，函數是第一類對象，這意味著函數可以像對象一樣按照第一類管理被使用。既然函數實際上是對象：它們能被“存儲”在變量中，能作為函數參數被傳遞，能在函數中被創建，能從函數中返回。

因為函數是第一類對象，我們可以在JavaScript使用回調函數。在下面的文章中，我們將學到關于回調函數的方方面面。回調函數可能是在JavaScript中使用最多的函數式編程技巧，雖然在字面上看起來它們一直一小段JavaScript或者jQuery代碼，但是對于許多開發者來說它任然是一個謎。在閱讀本文之后你能了解怎樣使用回調函數。

回調函數是從一個叫函數式編程的編程范式中衍生出來的概念。簡單來說，函數式編程就是使用函數作為變量。函數式編程過去 - 甚至是現在，依舊沒有被廣泛使用 - 它過去常被看做是那些受過特許訓練的，大師級別的程序員的秘傳技巧。

幸運的是，函數是編程的技巧現在已經被充分闡明因此像我和你這樣的普通人也能去輕松使用它。函數式編程中的一個主要技巧就是回調函數。在后面內容中你會發現實現回調函數其實就和普通函數傳參一樣簡單。這個技巧是如此的簡單以致于我常常感到很奇怪為什么它經常被包含在講述JavaScript高級技巧的章節中。

什么是回調或者高階函數

一個回調函數，也被稱為高階函數，是一個被作為參數傳遞給另一個函數（在這里我們把另一個函數叫做otherFunction）的函數，回調函數在otherFunction中被調用。一個回調函數本質上是一種編程模式（為一個常見問題創建的解決方案），因此，使用回調函數也叫做回調模式。

下面是一個在jQuery中使用回調函數簡單普遍的例子：

//注意到click方法中是一個函數而不是一個變量
//它就是回調函數
$("#btn_1").click(function() {
    alert("Btn 1 Clicked");
});

正如你在前面的例子中看到的，我們將一個函數作為參數傳遞給了click方法。click方法會調用（或者執行）我們傳遞給它的函數。這是JavaScript中回調函數的典型用法，它在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
});

再一次，注意到我們講一個匿名函數（沒有名字的函數）作為參數傳遞給了forEach方法。

到目前為止，我們將匿名函數作為參數傳遞給了另一個函數或方法。在我們看更多的實際例子和編寫我們自己的回調函數之前，先來理解回調函數是怎樣運作的。

回調函數是怎樣運作的？

因為函數在JavaScript中是第一類對象，我們像對待對象一樣對待函數，因此我們能像傳遞變量一樣傳遞函數，在函數中返回函數，在其他函數中使用函數。當我們將一個回調函數作為參數傳遞給另一個函數是，我們僅僅傳遞了函數定義。我們并沒有在參數中執行函數。我們并不傳遞像我們平時執行函數一樣帶有一對執行小括號()的函數。

需要注意的很重要的一點是回調函數并不會馬上被執行。它會在包含它的函數內的某個特定時間點被“回調”（就像它的名字一樣）。因此，即使第一個jQuery的例子如下所示：

//匿名函數不會再參數中被執行
//這是一個回調函數
$("#btn_1").click(function(){
    alert("Btn 1 Clicked");
});

這個匿名函數稍后會在函數體內被調用。即使有名字，它依然在包含它的函數內通過arguments對象獲取。

回調函數是閉包

都能夠將一個回調函數作為變量傳遞給另一個函數時，這個回調函數在包含它的函數內的某一點執行，就好像這個回調函數是在包含它的函數中定義的一樣。這意味著回調函數本質上是一個閉包。

正如我們所知，閉包能夠進入包含它的函數的作用域，因此回調函數能獲取包含它的函數中的變量，以及全局作用域中的變量。

實現回調函數的基本原理

回調函數并不復雜，但是在我們開始創建并使用回調函數之前，我們應該熟悉幾個實現回調函數的基本原理。

使用命名或匿名函數作為回調

在前面的jQuery例子以及forEach的例子中，我們使用了在參數位置定義的匿名函數作為回調函數。這是在回調函數使用中的一種普遍的魔術。另一種常見的模式是定義一個命名函數并將函數名作為變量傳遞給函數。比如下面的例子：

//全局變量
var allUserData = [];

//普通的logStuff函數，將內容打印到控制臺
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]);
        }
    }
}

//一個接收兩個參數的函數，后面一個是回調函數
function getInput (options, callback){
    allUserData.push(options);
    callback(options);
}

//當我們調用getInput函數時，我們將logStuff作為一個參數傳遞給它
//因此logStuff將會在getInput函數內被回調（或者執行）
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//name:Rich
//speciality:Javascript

傳遞參數給回調函數

既然回調函數在執行時僅僅是一個普通函數，我們就能給它傳遞參數。我們能夠傳遞任何包含它的函數的屬性（或者全局屬性）作為回調函數的參數。在前面的例子中，我們將options作為一個參數傳遞給了回調函數。現在我們傳遞一個全局變量和一個本地變量：

//全局變量
var generalLastName = "Cliton";

function getInput (options, callback){
    allUserData.push (options);
    //將全局變量generalLastName傳遞給回調函數
    callback(generalLastName,options);
}

在執行之前確保回調函數是一個函數

在調用之前檢查作為參數被傳遞的回調函數確實是一個函數，這樣的做法是明智的。同時，這也是一個實現條件回調函數的最佳時間。

我們來重構上面例子中的getInput函數來確保檢查是恰當的。

function getInput(options, callback){
    allUserData.push(options);
    
    //確保callback是一個函數
    if(typeof callback === "function"){
        //調用它，既然我們已經確定了它是可調用的
        callback(options);
    }
}

如果沒有適當的檢查，如果getInput的參數中沒有一個回調函數或者傳遞的回調函數事實上并不是一個函數，我們的代碼將會導致運行錯誤。

使用this對象的方法作為回調函數時的問題

當回調函數是一個this對象的方法時，我們必須改變執行回調函數的方法來保證this對象的上下文。否則如果回調函數被傳遞給一個全局函數，this對象要么指向全局window對象（在瀏覽器中）。要么指向包含方法的對象。

我們在下面的代碼中說明：

//定義一個擁有一些屬性和一個方法的對象 //我們接著將會把方法作為回調函數傳遞給另一個函數

var clientData = {
    id: 094545,
    fullName "Not Set",
    //setUsrName是一個在clientData對象中的方法
    setUserName: fucntion (firstName, lastName){
        //這指向了對象中的fullName屬性
        this.fullName = firstName + " " + lastName;
    }
} 

function getUserInput(firstName, lastName, callback){
    //在這做些什么來確認firstName/lastName
    //現在存儲names
    callback(firstName, lastName);
}

在下面你的代碼例子中，當clientData.setUsername被執行時，this.fullName并沒有設置clientData對象中的fullName屬性。相反，它將設置window對象中的fullName屬性，因為getUserInput是一個全局函數。這是因為全局函數中的this對象指向window對象。

getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData,fullName);  //Not Set
//fullName屬性將在window對象中被初始化     
console.log(window.fullName);  //Barack Obama

使用Call和Apply函數來保存this

我們可以使用Call或者Apply函數來修復上面你的問題。到目前為止，我們知道了每個JavaScript中的函數都有兩個方法:Call 和 Apply。這些方法被用來設置函數內部的this對象以及給此函數傳遞變量。

call接收的第一個參數為被用來在函數內部當做this的對象，傳遞給函數的參數被挨個傳遞（當然使用逗號分開）。Apply函數的第一個參數也是在函數內部作為this的對象，然而最后一個參數確是傳遞給函數的值的數組。

聽起來很復雜，那么我們來看看使用Apply和Call有多么的簡單。為了修復前面例子的問題，我將在下面你的例子中使用Apply函數：

//注意到我們增加了新的參數作為回調對象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback. callbackObj){
    //在這里做些什么來確認名字
    callback.apply(callbackObj, [firstName, lastName]);
}

使用Apply函數正確設置了this對象，我們現在正確的執行了callback并在clientData對象中正確設置了fullName屬性：

//我們將clientData.setUserName方法和clientData對象作為參數，clientData對象會被Apply方法使用來設置this對象     
getUserName("Barack", "Obama", clientData.setUserName, clientData);

//clientData中的fullName屬性被正確的設置
console.log(clientUser.fullName); //Barack Obama

我們也可以使用Call函數，但是在這個例子中我們使用Apply函數。

允許多重回調函數

我們可以將不止一個的回調函數作為參數傳遞給一個函數，就像我們能夠傳遞不止一個變量一樣。這里有一個關于jQuery中AJAX的例子：

function successCallback(){
    //在發送之前做點什么
}
  
function successCallback(){
//在信息被成功接收之后做點什么
}

function completeCallback(){
//在完成之后做點什么
}

function errorCallback(){
    //當錯誤發生時做點什么
}

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

“回調地獄”問題以及解決方案

在執行異步代碼時，無論以什么順序簡單的執行代碼，經常情況會變成許多層級的回調函數堆積以致代碼變成下面的情形。這些雜亂無章的代碼叫做回調地獄因為回調太多而使看懂代碼變得非常困難。我從node-mongodb-native，一個適用于Node.js的MongoDB驅動中拿來了一個例子。這段位于下方的代碼將會充分說明回調地獄：

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();
                    });
                });
            });
        });
    });
});

你應該不想在你的代碼中遇到這樣的問題，當你當你遇到了

• 你將會時不時的遇到這種情況

• 這里有關于這個問題的兩種解決方案。

• 給你的函數命名并傳遞它們的名字作為回調函數，而不是主函數的參數中定義匿名函數。

• 模塊化L將你的代碼分隔到模塊中，這樣你就可以到處一塊代碼來完成特定的工作。然后你可以在你的巨型應用中導入模塊。

創建你自己的回調函數

既然你已經完全理解了關于JavaScript中回調函數的一切（我認為你已經理解了，如果沒有那么快速的重讀以便），你看到了使用回調函數是如此的簡單而強大，你應該查看你的代碼看看有沒有能使用回調函數的地方。回調函數將在以下幾個方面幫助你：

• 避免重復代碼（DRY-不要重復你自己）

• 在你擁有更多多功能函數的地方實現更好的抽象（依然能保持所有功能）

• 讓代碼具有更好的可維護性

• 使代碼更容易閱讀

• 編寫更多特定功能的函數

創建你的回調函數非常簡單。在下面的例子中，我將創建一個函數完成以下工作：讀取用戶信息，用數據創建一首通用的詩，并且歡迎用戶。這本來是個非常復雜的函數因為它包含很多if/else語句并且，它將在調用那些用戶數據需要的功能方面有諸多限制和不兼容性。

相反，我用回調函數實現了添加功能，這樣一來獲取用戶信息的主函數便可以通過簡單的將用戶全名和性別作為參數傳遞給回調函數并執行來完成任何任務。

簡單來講，getUserInput函數是多功能的：它能執行具有無種功能的回調函數。

//首先，創建通用詩的生成函數；它將作為下面的getUserInput函數的回調函數

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");
}

//callback，參數的最后一項，將會是我們在上面定義的genericPoemMaker函數
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);
    }
}

調用getUserInput函數并將genericPoemMaker函數作為回調函數：

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// 輸出
/* 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函數僅僅只負責提取數據，我們可以把任意回調函數傳遞給它。例如，我們可以傳遞一個greetUser函數：

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

// 將greetUser作為一個回調函數
getUserInput("Bill", "Gates", "Man", greetUser);

// 這里是輸出
Hello, Mr. Bill Gates

我們調用了完全相同的getUserInput函數，但是這次完成了一個完全不同的任務。

正如你所見，回調函數很神奇。即使前面的例子相對簡單，想象一下能節省多少工作量，你的代碼將會變得更加的抽象，這一切只需要你開始使用毀掉函數。大膽的去使用吧。

在JavaScript編程中回調函數經常以幾種方式被使用，尤其是在現代Web應用開發以及庫和框架中：

• 異步調用（例如讀取文件，進行HTTP請求，等等）

• 時間監聽器/處理器

• setTimeout和setInterval方法

• 一般情況：精簡代碼

結束語

JavaScript回調函數非常美妙且功能強大，它們為你的Web應用和代碼提供了諸多好處。你應該在有需求時使用它；或者為了代碼的抽象性，可維護性以及可讀性而使用回調函數來重構你的代碼。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中回調函數的使用方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!