詳解回調函數

前言

回調函數作為我們經常用到的一種函數，看似複雜，實則很容易理解，下面讓我來帶你一步步理解回調函數。

詳解

我們先來看一個我們最熟悉的普通函數的定義與調用。

<code>function map (c) {
  console.log(c);
}
map(5);/<code>

這是我們最常見的函數，而這種函數定義時就是規定了方法，而需要傳入變量。

那我們換一種思維，我們規定好函數的變量，而傳入方法呢，我們這裡設置方法b為我們的形參

<code>var map = function (b) {
    b(4);
}/<code>

這時我們發現，我們在調用函數map的時候需要傳入一個方法進去，那我們就按照定義傳入一個方法。

<code>map( function(a) {
    console.log(a);
} );/<code>

此時我們並沒有給這個傳入的方法起名字，這個方法又稱之為匿名函數，所以我們這裡調用map方法時可以簡寫為

<code>map((a) => {
  console.log(a);
})；/<code>

打印4，而我們紅框裡的內容就是我們傳入的參數，這不過這個參數是一個函數罷了。也就是說，紅框裡的內容與上面的形參b相等，我們用紅框裡的函數去替換b，就得到了 console.log(4) 。

二次回調函數

我們再來看一個二次回調的例子

剛才我們在函數定義時規定了變量是一個常數，而如果我們將這個常數換為一個匿名函數呢

<code>var map = function (b){
  b( (a)=>{
    console.log(a);
  } );
};/<code>

我們看到，剛才的4換為了一個函數，我們如何去調用方法map呢？

我們可以逆向思維想象一下，我們調用函數map時需要傳入一個參數，參數替代b，而我們此時b裡已經有了方法，而缺少變量，這就相當於我們上面講一次回調函數時的調用函數部分，此時我們傳入一個定義了變量而參數是個方法的方法進去，就相當於一次回調函數的函數定義部分。

<code>map( function (e) {
    e(6); 

} );/<code>

簡寫為 map( (e) => {e(6);} ); 。

此時我們紅框裡的內容依舊相當於上面的形參b，而替換掉b以後，我們藍框裡的內容就相當於下面的形參e，再替換掉e以後，就只剩下了我們最終想要表達的打印方法 console.log(6); 。

總結

根據二次回調函數的思想，我們可以無限回調。但我們對多次回調函數很少用到。

我們對於基礎知識應該牢牢把握才能理解整篇代碼。

閱讀更多 sandag 的文章

關鍵字: function 傳入 紅框