淺談javascript中的回調函數(shù)

要理解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ù) **

js_function.PNG

如圖中的執(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;
    }
)

上述代碼在控制臺中運行的結果如下:

js.PNG

回調函數(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)勢,可以簡化代碼服爷,提高效率杜恰,并且是代碼易于修改維護!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末仍源,一起剝皮案震驚了整個濱河市心褐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌笼踩,老刑警劉巖逗爹,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嚎于,居然都是意外死亡掘而,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門于购,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袍睡,“玉大人,你說我怎么就攤上這事价涝∨冢” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵色瘩,是天一觀的道長伪窖。 經常有香客問我,道長居兆,這世上最難降的妖魔是什么覆山? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮泥栖,結果婚禮上簇宽,老公的妹妹穿的比我還像新娘勋篓。我一直安慰自己,他們只是感情好魏割,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布譬嚣。 她就那樣靜靜地躺著,像睡著了一般钞它。 火紅的嫁衣襯著肌膚如雪拜银。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天遭垛,我揣著相機與錄音尼桶,去河邊找鬼。 笑死锯仪,一個胖子當著我的面吹牛泵督,可吹牛的內容都是我干的。 我是一名探鬼主播庶喜,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼小腊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了久窟?” 一聲冷哼從身側響起溢豆,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瘸羡,沒想到半個月后漩仙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡犹赖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年队他,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片峻村。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡麸折,死狀恐怖,靈堂內的尸體忽然破棺而出粘昨,到底是詐尸還是另有隱情垢啼,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布张肾,位于F島的核電站芭析,受9級特大地震影響,放射性物質發(fā)生泄漏吞瞪。R本人自食惡果不足惜馁启,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望芍秆。 院中可真熱鬧惯疙,春花似錦翠勉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蒿偎,卻和暖如春俭缓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背酥郭。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留愿吹,地道東北人不从。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像犁跪,于是被迫代替她去往敵國和親椿息。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內容

  • 在JavaScript中我們常聽說回調函數(shù)坷衍,回調函數(shù)是一段可執(zhí)行的代碼段寝优,它作為一個參數(shù)傳遞給其他的代碼,其作用是...
    plainnany閱讀 632評論 0 4
  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前枫耳,不能直接為函數(shù)的參數(shù)指定默認值乏矾,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,359評論 0 1
  • //Clojure入門教程: Clojure – Functional Programming for the J...
    葡萄喃喃囈語閱讀 3,629評論 0 7
  • 半夜驚醒迁杨,無睡意钻心,當思念牽起淚水不斷的流下,爸爸像是一家的主心骨铅协,是家的疑聚力捷沸,沒有爸爸了,感覺家的意義少了幾分狐史,...
    宋寧靜閱讀 194評論 0 0
  • 大學畢了業(yè)痒给,哎,網上說的真對啊骏全,畢業(yè)就失業(yè)苍柏,但是那么多人為啥是我啊 朋友圈到處曬名校的畢業(yè)證,畢業(yè)照 曬大公司...
    洋蔥皮芽子閱讀 262評論 0 0