如何判斷this指向&手動實現(xiàn)JS中的call()和bind()

判斷this指向

對于普通的function函數(shù)來說备畦,this的行為與動態(tài)作用域很相似武通,而箭頭函數(shù)的this的行為則更像詞法作用域堪滨。所謂動態(tài)作用域畔勤,簡單來講就是在運行時才能夠確定的作用域蕾各,與之相對的是詞法作用域,就是在書寫代碼的階段確定的作用域硼被。

由于this是在函數(shù)被調(diào)用時才能判斷其指向的,因此this指向的判斷一直是令很多新手頭疼的點渗磅。其實判斷this指向并不難嚷硫,只要遵循以下步驟即可(優(yōu)先級由高到低):

  1. 是否由new調(diào)用,若有則指向新創(chuàng)建的對象本身

  2. 有無call始鱼、apply仔掸、bind的顯式綁定,若有則指向指定的對象

  3. 隱式調(diào)用医清,指向調(diào)用函數(shù)的那個上下文對象

  4. 以上皆無起暮,在非嚴格模式下綁定到全局對象(window或global),嚴格模式下綁定到undefined

手動實現(xiàn)call()

call()和bind()都是改變函數(shù)this指向的方法会烙,不同之處在與call()是立即調(diào)用而bind()是返回一個函數(shù)的副本

思路:對于


o1.hi.myCall(o2)

將o1中的hi()添加到o2中负懦,再調(diào)用o2剛剛添加的hi()筒捺,此時已經(jīng)得到了結(jié)果,接著刪除o2的hi()纸厉,返回結(jié)果即可系吭。


Function.prototype.myCall = function (context, ...args) {

    let temp = Symbol('call');

    context = context || window;

    context[temp] = this;

    let result = context[temp](...args);

    delete context[temp];

    return result;

}

測試一下結(jié)果


let o1 = {

    a: 11,

    hi(b, c) {

        console.log(this.a, b, c);

    }

};

let o2 = {

    a: 22

};

//test

let foo = o1.hi.myBind(o2, 8, 9);

foo();//22 8 9

手動實現(xiàn)bind()

由于上面已經(jīng)實現(xiàn)了call()祝辣,直接調(diào)用即可


Function.prototype.myBind = function (context, ...args) {

    if (typeof this !== 'function') {

        throw new TypeError('myBind callback is not a function');

    }

    return () => {

        return this.myCall(context, ...args);

    }

}

測試一下結(jié)果


//test

let foo = o1.hi.myBind(o2, 8, 9);

foo();//22 8 9

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末讼育,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子舅锄,更是在濱河造成了極大的恐慌躯枢,老刑警劉巖则吟,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锄蹂,居然都是意外死亡氓仲,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門败匹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寨昙,“玉大人,你說我怎么就攤上這事掀亩√蚰模” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵槽棍,是天一觀的道長捉蚤。 經(jīng)常有香客問我,道長炼七,這世上最難降的妖魔是什么缆巧? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮豌拙,結(jié)果婚禮上陕悬,老公的妹妹穿的比我還像新娘。我一直安慰自己按傅,他們只是感情好捉超,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著唯绍,像睡著了一般拼岳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上况芒,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天惜纸,我揣著相機與錄音,去河邊找鬼。 笑死耐版,一個胖子當著我的面吹牛祠够,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播椭更,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼哪审,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了虑瀑?” 一聲冷哼從身側(cè)響起湿滓,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舌狗,沒想到半個月后叽奥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡痛侍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年朝氓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片主届。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡赵哲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出君丁,到底是詐尸還是另有隱情枫夺,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布绘闷,位于F島的核電站橡庞,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏印蔗。R本人自食惡果不足惜扒最,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望华嘹。 院中可真熱鬧吧趣,春花似錦、人聲如沸耙厚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颜曾。三九已至纠拔,卻和暖如春秉剑,著一層夾襖步出監(jiān)牢的瞬間泛豪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留诡曙,地道東北人臀叙。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像价卤,于是被迫代替她去往敵國和親劝萤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

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

  • 1.概念 在JavaScript中慎璧,this 是指當前函數(shù)中正在執(zhí)行的上下文環(huán)境床嫌,因為這門語言擁有四種不同的函數(shù)調(diào)...
    BluesCurry閱讀 1,127評論 0 2
  • 前言 面試官出很多考題,基本都會變著方式來考察this指向胸私,看候選人對JS基礎(chǔ)知識是否扎實厌处。讀者可以先拉到底部看總...
    若川i閱讀 1,106評論 0 10
  • 介紹 JavaScript中有一個被稱為作用域(Scope)的特性。雖然對于許多新手開發(fā)者來說岁疼,作用域的概念并不是...
    安_6dd1閱讀 960評論 0 8
  • Lua 5.1 參考手冊 by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 13,764評論 0 38
  • 你想要的阔涉,未必屬于你,你想留得捷绒,那也只是想留瑰排,想留 留得住嗎? 既然留不住 既然不屬于你 那就放手吧 那就這樣吧 ...
    折翼K閱讀 166評論 0 1