函數(shù)解析 之 回調(diào)函數(shù)

1.?什么叫做回調(diào)函數(shù)馍管?

詳情請(qǐng)查看?阮一峰?之ES6?解析 鏈接:https://pan.baidu.com/s/1deSccY 密碼:fohv

答 :直白的說(shuō):就是 函數(shù) 中嵌套另一個(gè) 函數(shù) 形成復(fù)雜的語(yǔ)法結(jié)構(gòu)。在javascript?中薪韩,
函數(shù)也是一種變量可以成為其他函數(shù)的參數(shù)确沸。這里要注意 this 的指向。

官方定義:回調(diào)函數(shù)是一段可執(zhí)行的代碼段俘陷,它作為一個(gè)參數(shù)傳遞給其他的代碼罗捎,其作用是在需要的時(shí)候方便調(diào)用這段(回調(diào)函數(shù))代碼。

2.?回調(diào)函數(shù)特點(diǎn)

2.1? 不會(huì)立刻執(zhí)行, 正如定義中給出的一樣回調(diào)函數(shù)作為代碼片段可以根據(jù)需要在其特定條件下執(zhí)行, 回調(diào)函數(shù)作為參數(shù)傳遞給一個(gè)函數(shù)的時(shí)候拉盾,傳遞的只是函數(shù)的定義并不會(huì)立即執(zhí)行桨菜。

2.2? this,ES6推出了箭頭函數(shù), 箭頭函數(shù)的推出需要在寫(xiě)回調(diào)函數(shù)的時(shí)候格外注意, this 是指向所在函數(shù)的上下文對(duì)象, 如果在在ES6采用箭頭函數(shù)則需要注意 this使用, 箭頭函數(shù)中this并沒(méi)有上下文關(guān)系直說(shuō), 有興趣的可以查看ES6 阮一峰捉偏。

3.? 回調(diào)函數(shù)的好處

3.1 DRY倒得,避免重復(fù)代碼。

3.2 可以將通用的邏輯抽象夭禽。

3.3 業(yè)務(wù)邏輯分離 (it's so beautiful ^-^ ^-^)

3.4 提高代碼可維護(hù)性和可讀性霞掺。

3.5 分離專職的函數(shù)。

js回調(diào)函數(shù)的偉大之處是其他傳統(tǒng)語(yǔ)言所沒(méi)有的, 它可以實(shí)現(xiàn)業(yè)務(wù)邏輯分離, 相當(dāng)于暴露給外界一個(gè)接口, 這一點(diǎn)像極了前后端分離架構(gòu)中的 API 接口設(shè)計(jì)理念

4.? 回調(diào)函數(shù)的缺點(diǎn)

4.1?回調(diào)函數(shù)層級(jí)太多讹躯,使用困難菩彬。

4.2?大量的回調(diào)函數(shù)運(yùn)行,?消耗內(nèi)存潮梯,影響性能骗灶。

4.3?直白的來(lái)說(shuō),就是中看酷麦,不實(shí)用矿卑,能不用,就不用沃饶。

5.? 實(shí)例解析

1.0? //定義主函數(shù)母廷,回調(diào)函數(shù)作為參數(shù)function A(callback) {

? ? callback();?

? ? console.log('我是主函數(shù)');? ? ?

}//定義回調(diào)函數(shù)function B(){

? ? setTimeout("console.log('我是回調(diào)函數(shù)')", 3000);//模仿耗時(shí)操作? }//調(diào)用主函數(shù),將函數(shù)B傳進(jìn)去A(B);//輸出結(jié)果我是主函數(shù)

我是回調(diào)函數(shù)



2.0 //函數(shù)嵌套

functionaddSqua(num1, num2, callback){

??varsum = num1 + num2;

??returncallback(sum);

}

functionsqua(num){

??returnnum*num;

}

let num = addSqua(1, 2, squa);? ?

console.log(num);

//=>9

6.箭頭函數(shù)

箭頭函數(shù)ES6最常用的一個(gè)新特性了糊肤,用它來(lái)寫(xiě)function比原來(lái)的寫(xiě)法要簡(jiǎn)潔清晰很多琴昆,下面的來(lái)源與?阮一峰講解的 es6。?鏈接 :百度云盤ES6資料? 密碼:nd2h? 第70頁(yè)馆揉。

1.0

function (i) { return? i +1; }

//ES5的寫(xiě)法

(i) => i +1

//ES6的寫(xiě)法



2.0

const pipeline = (...funcs) =>

val => funcs.reduce((a, b) => b(a), val);

const plus1 = a => a + 1;

const mult2 = a => a * 2;

const addThenMult = pipeline(plus1, mult2);

addThenMult(5)

// 12



3.0

// ES6

function foo() {

setTimeout(() => {

? console.log('id:', this.id);

????????????}, 100);

?}

// ES5

function foo() {

var _this = this;

setTimeout(function () {

console.log('id:', _this.id);

}, 100);

}



4.0能力提升

請(qǐng)問(wèn)下面的代碼之中有幾個(gè)this业舍?

function foo() {

return () => {

return () => {

return () => {

console.log('id:', this.id);

};

};

};

}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1

var t2 = f().call({id: 3})(); // id: 1

var t3 = f()().call({id: 4}); // id: 1

上面代碼之中,只有一個(gè)this,就是函數(shù)foo的this舷暮,所以t1态罪、t2、t3都輸出同樣的結(jié)果下面。因?yàn)樗械膬?nèi)層函數(shù)都是箭頭函數(shù)复颈,都沒(méi)有自己的this,

它們的this其實(shí)都是最外層foo函數(shù)的this沥割。

注意: 由于箭頭函數(shù)沒(méi)有自己的this耗啦,所以當(dāng)然也就不能用call()、apply()机杜、bind()這些方法去改變this的指向帜讲。

詳情請(qǐng)查看?阮一峰?之ES6?解析 鏈接:https://pan.baidu.com/s/1deSccY 密碼:fohv

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市椒拗,隨后出現(xiàn)的幾起案子似将,更是在濱河造成了極大的恐慌,老刑警劉巖蚀苛,帶你破解...
    沈念sama閱讀 221,548評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玩郊,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡枉阵,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門预茄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)兴溜,“玉大人,你說(shuō)我怎么就攤上這事耻陕。” “怎么了诗宣?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,990評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵膘怕,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我召庞,道長(zhǎng)岛心,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,618評(píng)論 1 296
  • 正文 為了忘掉前任篮灼,我火速辦了婚禮忘古,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘诅诱。我一直安慰自己髓堪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著干旁,像睡著了一般驶沼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上争群,一...
    開(kāi)封第一講書(shū)人閱讀 52,246評(píng)論 1 308
  • 那天回怜,我揣著相機(jī)與錄音,去河邊找鬼祭阀。 笑死鹉戚,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的专控。 我是一名探鬼主播抹凳,決...
    沈念sama閱讀 40,819評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼伦腐!你這毒婦竟也來(lái)了赢底?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,725評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤柏蘑,失蹤者是張志新(化名)和其女友劉穎幸冻,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體咳焚,經(jīng)...
    沈念sama閱讀 46,268評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡洽损,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了革半。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碑定。...
    茶點(diǎn)故事閱讀 40,488評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖又官,靈堂內(nèi)的尸體忽然破棺而出延刘,到底是詐尸還是另有隱情,我是刑警寧澤六敬,帶...
    沈念sama閱讀 36,181評(píng)論 5 350
  • 正文 年R本政府宣布碘赖,位于F島的核電站,受9級(jí)特大地震影響外构,放射性物質(zhì)發(fā)生泄漏普泡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評(píng)論 3 333
  • 文/蒙蒙 一典勇、第九天 我趴在偏房一處隱蔽的房頂上張望劫哼。 院中可真熱鬧,春花似錦割笙、人聲如沸权烧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,331評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)般码。三九已至妻率,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間板祝,已是汗流浹背宫静。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,445評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留券时,地道東北人孤里。 一個(gè)月前我還...
    沈念sama閱讀 48,897評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像橘洞,于是被迫代替她去往敵國(guó)和親捌袜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語(yǔ)法 2.1 概述 基本句法和變量 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line)炸枣,也就是一...
    悟名先生閱讀 4,151評(píng)論 0 13
  • Promise 對(duì)象 Promise 的含義 Promise 是異步編程的一種解決方案虏等,比傳統(tǒng)的解決方案——回調(diào)函...
    neromous閱讀 8,708評(píng)論 1 56
  • ES6語(yǔ)法跟babel: 一、首先我們來(lái)解釋一下什么是ES适肠? ES的全稱是ECMAScript霍衫。1996 11 ,...
    Mooya_閱讀 1,007評(píng)論 0 0
  • js簡(jiǎn)介 Js是一種基于事件和對(duì)象驅(qū)動(dòng)的解釋性、松散性的語(yǔ)言侯养。 一切皆對(duì)象 javascript 布蘭登艾奇 ...
    塔庫(kù)納瑪哈哈閱讀 1,220評(píng)論 0 2
  • 看不懂,可以看個(gè)熱鬧息尺,你的邏輯能經(jīng)受住真正的邏輯之考驗(yàn)否?[奸笑] 仙人也從來(lái)沒(méi)指望多少人能看懂這里的所有疾掰,看懂幾...
    縱情嬉戲天地間閱讀 358評(píng)論 0 0