目錄

1.什么是回調函數（callback）呢？

2.回調函數有哪些特點？

3.回調函數中this的指向問題

4.為什么要用到回調函數？

5.回調函數和異步操作的關系是什么？回調函數是異步么？

---

1.什么是回調函數（callback）呢？

把函數當作一個參數傳到另外一個函數中，當需要用這個函數是，再回調運行()這個函數.

回調函數是一段可執行的代碼段，它作為一個參數傳遞給其他的代碼，其作用是在需要的時候方便調用這段（回調函數）代碼。（作為參數傳遞到另外一個函數中，這個作為參數的函數就是回調函數）

理解：函數可以作為一個參數傳遞到另外一個函數中。

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function add(num1, num2, callback) {
            

        

    

    


        


            


            

        

        


            

                var sum = num1 + num2;
            

        

    

    


        


            


            

        

        


            

                callback(sum);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function print(num) {
            

        

    

    


        


            


            

        

        


            

                console.log(num);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                add(1, 2, print); //3
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

分析：add(1, 2, print);中，函數print作為一個參數傳入到add函數中，但并不是馬上起作用，而是var sum = num1 + num2;運行完之后需要打印輸出sum的時候才會調用這個函數。(這個作為參數傳遞到另外一個函數中，這個作為參數的函數就是回調函數.

匿名回調函數：

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function add(num1, num2, callback) {
            

        

    

    


        


            


            

        

        


            

                var sum = num1 + num2;
            

        

    

    


        


            


            

        

        


            

                callback(sum);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                add(1, 2, function (sum) {
            

        

    

    


        


            


            

        

        


            

                console.log(sum); //=>3
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

2.回調函數有哪些特點？

1.不會立即執行

回調函數作為參數傳遞給一個函數的時候，傳遞的只是函數的定義并不會立即執行。和普通的函數一樣，回調函數在調用函數數中也要通過()運算符調用才會執行。

2.回調函數是一個閉包

回調函數是一個閉包，也就是說它能訪問到其外層定義的變量。

3.執行前類型判斷

在執行回調函數前最好確認其是一個函數。

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function add(num1, num2, callback) {
            

        

    

    


        


            


            

        

        


            

                var sum = num1 + num2;
            

        

    

    


        


            


            

        

        


            

                //判定callback接收到的數據是一個函數
            

        

    

    


        


            


            

        

        


            

                if (typeof callback === 'function') {
            

        

    

    


        


            


            

        

        


            

                //callback是一個函數，才能當回調函數使用
            

        

    

    


        


            


            

        

        


            

                callback(sum);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

3.回調函數中this的指向問題

注意在回調函數調用時this的執行上下文并不是回調函數定義時的那個上下文，而是調用它的函數所在的上下文。

舉例：

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function createData(callback){
            

        

    

    


        


            


            

        

        


            

                callback();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var obj ={
            

        

    

    


        


            


            

        

        


            

                data:100,
            

        

    

    


        


            


            

        

        


            

                tool:function(){
            

        

    

    


        


            


            

        

        


            

                createData(function(n){
            

        

    

    


        


            


            

        

        


            

                console.log(this,1111); //window 1111
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                obj.tool();
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

分析：this指向是 離它最近的或者嵌套級別的 function/方法的調用者，這里離它最近的function是

function(n)，會回到上面的callback()中，這時候調用者就不是obj而是window。

 解決回調函數this指向的方法1：箭頭函數

回調函數（若回調函數是普通函數時）當參數傳入另外的函數時，若不知道這個函數內部怎么調用回調函數，就會出現回調函數中的this指向不明確的問題（就比如上面例子中this指向的不是obj而是window）。所以 把箭頭函數當回調函數，然后作為參數傳入另外的函數中就不會出現this指向不明的問題。

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function createData(callback){
            

        

    

    


        


            


            

        

        


            

                callback();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var obj ={
            

        

    

    


        


            


            

        

        


            

                data:100,
            

        

    

    


        


            


            

        

        


            

                tool:function(){
            

        

    

    


        


            


            

        

        


            

                createData((n)=>{
            

        

    

    


        


            


            

        

        


            

                this.data = n;
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                obj.tool();
            

        

    

    


        


            


            

        

        


            

                console.log(obj.data);
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




    

 分析:回調函數用箭頭函數寫之后，this指向很明確，就是 離它最近的或者嵌套級別的 function/方法的調用者，所以這里是 obj 。

解決回調函數this指向的方法2：var self = this;

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function createData(callback){
            

        

    

    


        


            


            

        

        


            

                callback(999);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var obj ={
            

        

    

    


        


            


            

        

        


            

                data:100,
            

        

    

    


        


            


            

        

        


            

                tool:function(){
            

        

    

    


        


            


            

        

        


            

                var self = this; //這里的this指向obj，然后當一個變量取用
            

        

    

    


        


            


            

        

        


            

                createData(function(n){
            

        

    

    


        


            


            

        

        


            

                self.data = n;
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                obj.tool();
            

        

    

    


        


            


            

        

        


            

                console.log(obj.data);
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




    

4.為什么要用到回調函數？

有一個非常重要的原因 —— JavaScript 是事件驅動的語言。這意味著，JavaScript 不會因為要等待一個響應而停止當前運行，而是在監聽其他事件時繼續執行。來看一個基本的例子：

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function first() {
            

        

    

    


        


            


            

        

        


            

                console.log(1);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function second() {
            

        

    

    


        


            


            

        

        


            

                console.log(2);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                first();
            

        

    

    


        


            


            

        

        


            

                second();
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

 分析:正如你所料，first 函數首先被執行，隨后 second 被執行 —— 控制臺輸出:1  2

但如果函數 first 包含某種不能立即執行的代碼會如何呢？例如我們必須發送請求然后等待響應的 API 請求？為了模擬這種狀況，我們將使用 setTimeout，它是一個在一段時間之后調用函數的 JavaScript 函數。我們將函數延遲 500 毫秒來模擬一個 API 請求，新代碼長這樣：

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                function first() {
            

        

    

    


        


            


            

        

        


            

                // 模擬代碼延遲
            

        

    

    


        


            


            

        

        


            

                setTimeout(function () { //所以function(){console.log(1)}是回調函數
            

        

    

    


        


            


            

        

        


            

                console.log(1);
            

        

    

    


        


            


            

        

        


            

                }, 500);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function second() {
            

        

    

    


        


            


            

        

        


            

                console.log(2);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                first();
            

        

    

    


        


            


            

        

        


            

                second();
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




    

分析:這里 function(){console.log(1)}函數當作一個參數傳入setTimeout函數中，因為setTimeout是官方提供得一個函數，里面有很多復雜的業務程序，所以函數 function(){console.log(1)}傳入后，不一定馬上運行，要setTimeout里面要運行到function(){console.log(1)}時才會運行該函數參數，那是不是整個程序就一直等setTimeout運行？不是的?。?！

整個程序運行結果為: 2  1 ,并不是原先的1 2 .即使我們首先調用了 first() 函數，我們記錄的輸出結果卻在 second() 函數之后。

這不是 JavaScript 沒有按照我們想要的順序執行函數的問題，而是 JavaScript 在繼續向下執行 second() 之前沒有等待 first() 響應的問題。回調正是確保一段代碼執行完畢之后再執行另一段代碼的方式。

5.回調函數和異步操作的關系是什么？回調函數是異步么？

定義：回調函數被認為是一種高級函數，一種被作為參數傳遞給另一個函數的高級函數。回調函數的本質是一種模式(一種解決常見問題的模式)，因此回調函數也被稱為回調模式。 

簡而言之：一個函數在另一個函數中被調用。而且可以當參數傳給其他函數。

所以： 回調函數和異步操作的關系是沒有關系?。?！ 

那為什么很多的異步操作都有回填函數??？？

問：你所知道的異步操作，是回調的作用么？？？  并不是。

回調：更多的可以理解為一種業務邏輯把           異步編程：JS代碼的執行順序       

簡單理解：callback 顧名思義  打電話回來的意思

eg1：你點外賣，剛好你要吃的食物沒有了，于是你在店老板那里留下了你的電話，過了幾天店里有了，店員就打了你的電話，然后你接到電話后就跑到店里買了。在這個例子里，你的電話號碼就叫回調函數，你把電話留給店員就叫登記回調函數，店里后來有貨了叫做觸發了回調關聯的事件，店員給你打電話叫做調用回調函數，你到店里去取貨叫做響應回調事件。

eg2：再比如，你發送一個axios 請求，請求成功之后，觸發成功的回調函數，請求失敗觸發失敗的回調函數。這里面的回調函數更像是一個工具，后臺通過這個工具告訴你，你成功了抑或是失敗了。這里面的所有異步操作都和回調沒關系，真正的異步是then方法。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司