回調函數是非常重要的概念，但是初學者往往對于回調函數理解起來異常困難。我將從回調函數的概念、回調函數的作用、如何使用回調函數的這三點，來剖析這個問題。大概需要10分鐘時間閱讀，希望能對您有所幫助。

       什么是回調函數？一個被當做參數的函數，即為回調函數。首先我們要清楚一個概念，在JS中萬物皆為對象。函數本身也是一個對象，既然是對象，所以函數當然可以當做函數的參數。

//可以這樣創建函數

let fun = new Function("arg1", "arg2", "return arg1 * arg2;");

fun(3, 3); //6

如上述代碼，fun函數就是一個對象。

function fun1(fn){

fn();

}

function fun2(){

console.log("callBack");

}

fun1(fun2); //callBack

上述代碼中，fun2做為fun1的參數,fun2即為回調函數。在這里肯定會有小伙伴有疑問，為什么在fun1中不去直接調用fun2，而是通過回調函數進行傳參？下一小節，我們將詳細討論這個問題。

回調函數的作用就是幾乎所有的第三方函數我們都無法修改函數的內部實現， 比如數組的forEach,map等。那么我們也就無法在這樣的函數體中，調用自己所寫的功能模塊。所以此時，回調函數就提供了這樣的能力，使我們可以將自己所書寫的函數傳入第三方函數中，從而實現完整的功能。

下面我們將通過冒泡排序，來展示回調函數的使用方式。

let arr = [5,6,4,7,3,8,2,9,0,1];

function smallToLarge(L,R){//回調函數

return L > R;

}

function LargeTosmall(L,R){//回調函數

return L < R;

}

function bubbleSort(arr,callBack){

for(let i=0; i<arr.length-1; i++){

for(let j=0; j<arr.length-i-1; j++){

//將回調函數當做參數，決定結果是由小到大，還是由大到小

if(callBack(arr[j],arr[j+1])){

[arr[j],arr[j+1]] = [arr[j+1],arr[j]];

}

}

}

}

bubbleSort(arr,smallToLarge);

console.log(arr);//0123456789

bubbleSort(arr,LargeTosmall);

console.log(arr);//9876543210

函數bubbleSort擁有一個參數callBack,而smallToLarge與LargeTosmall均為回調函數，當我們在bubbleSort函數調用時，傳入smallToLarge與LargeTosmall就可以非常方便的控制排序的規則。

上一篇

千鋒長沙前端培訓分享之前端vue多人寫作開發技巧

下一篇

千鋒長沙前端培訓分享之前端優化詳解