函數類型中,比較常用的是匿名函數和回調函數,一般來說,回調函數是以匿名函數的形式來進行表現的。回調函數在事件監聽,異步的執行等,都會用到的是回調函數的作用。
回調函數的概念
第一:在js中,函數是個特殊的對象,確實是Function函數的創建的實例,我們可以通過new關鍵字來進行創建函數,比如:
var fn = new Function(''num1'',"num2","return (num1 + num2);");
這樣,也就是可以創建函數了。
傳統函數是以傳參數的形式,來輸入數據,并使用返回語句來進行獲取返回值。事實上,在函數的末尾使用return 來返回函數加工好的數據,來作為結束點。函數的傳參是作為函數的開始點,這樣,一個開始點和一個結束點,來形成一一對應的映射關系。其實函數,就是輸入和輸出實現過程的映射關系。
假設,我們在定義函數時,出現函數的執行結果過程比較長,我們是等待函數的執行呢?還是用異步來進行回調執行結果呢?所以,使用回調函數來進行異步的處理就顯得是非常重要的了。比如:我們的Ajax請求的回調函數,事件監聽的函數,還是我們自定義的函數傳參的回調函數都是運用這個機制。
后續子的邏輯依賴于主干邏輯行為的執行結果。等主干邏輯行為執行完畢,在主邏輯的函數的參數中,是回調函數的執行邏輯代碼。如果,一個對象的行為有后續行為的話,我們就可以傳入回調函數作為參數,來進行執行后續的邏輯。
第二 : 我們要注意的是,回調函數是作為主邏輯的參數是可傳可不傳的,所以,我們要進行健壯性處理,也就是利用邏輯與來進行健壯性的構建。以防止不傳回調函數的情況下,出現代碼執行錯誤。
我們在生活中,也會有這樣的執行順序的。我們不確定的是,主邏輯的執行結果,是什么,就先傳入一個回調函數,放到回調函數的下面,來進行執行。在主邏輯中,我們可以傳入匿名函數來進行回調,這樣,就比較滿足我們主邏輯的執行結果后的靈活的執行了。這個是回調函數的主要作用。比較靈活的執行,依賴于主邏輯的執行結果。
···
function fn (num,callback) {
for (var i = 0;i < num; i++) {
if ( i > 100) {
callback && callback();
}
}
};
···
fn (101,function () {
console.log('想玩什么就玩什么');
});
2: 異步的執行過程,我們需要回調函數來進行保存我們用ajax請求下來是值。還有新語法的Promise/then,我們都可以用這些來進行使用回調函數。
仿ES6 Promise
function Promise () {
this.takes = [];
this.error = function () {
console.log('數據獲取失敗');
};
};
3 : 通過call方法,來進行Promise構造函數添加方法.
(function () {
this.success = function (result) {
this.complate('success',result);
};
this.error = function (result) {
this.complate('error',result);
};
this.complate = function (type,result) {
if (this.takes.length > 0) {
this.takes.shift()[type](result);
};
};
this.then = function (successHanle,errorHanle) {
this.takes.push({
success : successHanle,
error : errorHanle
});
return this;
};
}).call(Promise.prototype);
// test實例
var promise = new Promise();
function start () {
在setTimeout延遲定時器中,我們傳入一個回調函數。我們可以通過
setTimeout來延遲其執行函數,進行模擬ajax請求。
setTimeout (function () {
promise.success('數據請求成功了');
},1000);
return promise;
};
var callback1 = function (re) {
console.log(re);
promise.error('數據請求失敗了');
};
var callback2 = function (re) {
console.log(re);
}
4:執行Promise對象
start().then(callback1,promise.err).then(callback2,promise.err);
這個是回調函數的執行過程,還有事件監聽,一旦觸發事件,就可以通過回調函數進行事件邏輯的處理或者是操作。這個是比較常見的回調函數的使用場景。事件監聽是我們要經常用的是回調函數使用場景。
6 : 在項目中,我們也經常用到的翻頁效果,也經常會回調函數的執行邏輯。
1 : function myFn (num1,num2,callback) {
num1 > num2 ? num1 : num2;
// 執行完比較大小的時候,觸發回調函數。
callback && callback ();
};
2 : function myFn2 (max,min,callback) {
var num = Math.ceil( Math.random()* (max - min) + min);
callback(num);
}
// 調用函數的執行
myFn2(12,4,function (num2) {
console.log(num2);
});
這些都是我們自定義的回調函數的執行。