要理解javascript中的回調函數(shù)姿搜,首先我們就要對javascript中的函數(shù)有一定的理解,所以我們先從javascript中函數(shù)談起我注,講講它與其他語言中的函數(shù)有什么不同按咒。
javascript中的函數(shù)
在javascript中,函數(shù)也是一種data但骨,一種數(shù)據励七,只不過這種數(shù)據比較特殊,它里面存的是代碼奔缠,而且這種data可以被調用執(zhí)行掠抬。
自然,因為函數(shù)也是數(shù)據校哎,所以就可以賦值給變量两波。
所以我們在javascript中經常看到這樣的程序:
var f = function() {
return 1;
}
我們將一個函數(shù)表達式賦值給了變量f闷哆,所以我們直接通過變量f來調用這個函數(shù)腰奋,只需要在f后面加上()就行了。
** javascript中函數(shù)的調用特征就是后面跟一對括號抱怔,里面可以有參數(shù) **
如圖中的執(zhí)行代碼劣坊,要調用某個函數(shù),只需要在它的名字后面加一對括號即可野蝇,而且我們可以像變量一樣使用函數(shù)讼稚,也就是說,我們可以將它拷貝給不同的變量绕沈。例如锐想,我們將f拷貝給f2,那么f2也是一個函數(shù)變量乍狐,并且可以調用執(zhí)行赠摇。
函數(shù)小結
現(xiàn)在我們javascript中的函數(shù)有以下特點:
- 函數(shù)也是一種data,一種數(shù)據
- 函數(shù)這種特殊的數(shù)據所包含的是代碼
- 它們可以被調用執(zhí)行
匿名函數(shù)
正如前文所提的浅蚪,
var f = function() {
return 1;
}
這樣的函數(shù)我們稱之為匿名函數(shù)藕帜。可以和非匿名函數(shù)對比一下
function f() {
return 1;
}
匿名函數(shù)有種特殊的用法就是惜傲,跟其他數(shù)據data一樣作為參數(shù)傳遞給其他函數(shù)洽故,因為我們已經知道函數(shù)在javascript中和其他數(shù)據data是一樣的額,所以將函數(shù)作為參數(shù)就不難理解了盗誊。這樣使用函數(shù)时甚,就是** 回調函數(shù) **隘弊。
回調函數(shù)
既然函數(shù)與任何可以被賦值給變量的數(shù)據是相同的,那么它們當然可以像其他數(shù)據那樣來定義荒适,刪除梨熙,拷貝,以及當成參數(shù)傳遞給其他函數(shù)刀诬。
例如下面一個簡單的例子
function add(a, b)
{
return a() + b();
}
function one() {
return 1;
}
function two() {
return 2;
}
add(one,two);
這就是一個簡單的回調函數(shù)的實例咽扇。add中的參數(shù)是兩個函數(shù),我們將one陕壹,two兩個函數(shù)傳進去质欲,在add中執(zhí)行one和two兩個函數(shù),這就是回調函數(shù)帐要。更簡潔的把敞,我們還可以直接用匿名函數(shù)來簡化上述代碼
function add(a, b)
return a() + b();
}
add(
function () {
return 1;
},
function () {
return 2;
}
)
上述代碼在控制臺中運行的結果如下:
回調函數(shù)的使用
知道了什么是回調函數(shù),我們來看一下回調函數(shù)的使用榨惠。
回調函數(shù)有什么優(yōu)勢呢奋早?也就是為什么要使用回調函數(shù)
- 它可以讓我們在不做命名的情況下傳遞函數(shù)(這意味可以減少變量名的使用)
- 我們可以講一個函數(shù)調用操作委托給另一個函數(shù)(這意味著可以節(jié)省一些代碼編寫工作)
- 有助于提升性能
回調函數(shù)實例
下面我們通過一個例子來看看回調函數(shù)使用和他的優(yōu)勢。
我們定義兩個函數(shù)赠橙,一個是multiplyByTwo()耽装;這個函數(shù)一個循環(huán)將它接受的三個參數(shù)分別乘2,并以數(shù)組的形式返回結果期揪;第二個函數(shù)addOne()只接受一個值掉奄,然后將它加1并返回。
function multiplyByTwo(a, b, c, callback) {
var ar = [
];
for (var i = 0; i < 3; i++) {
ar[i] = arguments[i] * 2;
}
return ar;
}
function addOne(a) {
return a + 1;
}
現(xiàn)在假設我們有三個元素(1凤薛,2姓建,3)我們現(xiàn)在搖獎它們先乘2,再分別加一缤苫,不考慮回調函數(shù)的話速兔,那么我們可以這么做
var myarr = [
];
myarr = multiplyByTwo(1, 2, 3);
//然后再遍歷數(shù)組,給每個元素加一
for (var i = 0; i < 3; i++) {
myarr[i] = addOne(myarr[i]);
}
這段代碼活玲,顯然可以工作涣狗,但還有一定的改善空間,特別是這里使用了兩個循環(huán)舒憾,如果數(shù)據量一大镀钓,開銷一定很大。因此镀迂,我們可以使用回調函數(shù)丁溅,將它們合二為一,這就要對multiplyByTwo函數(shù)做一些小改動探遵,使其接受一個回調函數(shù)窟赏,并在每次迭代操作中調用它措译。
function multiplyByTwo(a, b, c, callback) {
var ar = [
];
for (var i = 0; i < 3; i++) {
ar[i] = callback(arguments[i] * 2);
}
return ar;
}
這樣,我們只需要調用一次函數(shù)就可以了饰序。
var myarr = mutiplyByTwo(1, 2, 3, addOne);
myarr
總結
我們從javascript中的函數(shù)講起,講了函數(shù)在javascript中和數(shù)據一樣规哪,可以賦值求豫,刪除,拷貝诉稍,自然也可以作為函數(shù)的參數(shù)蝠嘉,這樣就引出了回調函數(shù)的概念,我們先通過一個簡單的例子杯巨,介紹了回調函數(shù)蚤告,然后通過一個例子說明了回調函數(shù)使用的優(yōu)勢,可以簡化代碼服爷,提高效率杜恰,并且是代碼易于修改維護!