成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手寫JavaScript中的bind方法

AZmake / 3031人閱讀

摘要：如果綁定后的函數(shù)被了，那么此時(shí)指向就發(fā)生改變。構(gòu)造函數(shù)上的屬性和方法，每個(gè)實(shí)例上都有。接下來聲明一個(gè)函數(shù)，在該中獲取了第二次傳的參數(shù)，并且返回了的執(zhí)行。的又等于的實(shí)例。至此，就實(shí)現(xiàn)了自己的方法。

之前已經(jīng)實(shí)現(xiàn)過了call，apply和new。今天順便把bind也實(shí)現(xiàn)下。
首先：

bind方法返回的是一個(gè)綁定this后的函數(shù)，并且該函數(shù)并沒有執(zhí)行，需要手動(dòng)去調(diào)用。(從這一點(diǎn)看bind函數(shù)就是一個(gè)高階函數(shù)，而且和call，apply方法有區(qū)別)。

bind方法可以綁定this，傳遞參數(shù)。注意，這個(gè)參數(shù)可以分多次傳遞。

如果bind綁定后的函數(shù)被new了，那么此時(shí)this指向就發(fā)生改變。此時(shí)的this就是當(dāng)前函數(shù)的實(shí)例。

構(gòu)造函數(shù)上的屬性和方法，每個(gè)實(shí)例上都有。

ok，上代碼～

Function.prototype.mybind = function(context){
    let that = this;
    let args1 = Array.prototype.slice.call(arguments,1);
    let bindFn = function(){
        let args2 = Array.prototype.slice.call(arguments);
        return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); 
    }
    let Fn = function(){};
    Fn.prototype = this.prototype;
    bindFn.prototype = new Fn();
    return bindFn;
}

首先 獲取到第一次傳遞的參數(shù)args1，此處要做截取處理，因?yàn)榈谝粋€(gè)參數(shù)是this。接下來聲明一個(gè)函數(shù)bindFn，在該bindFn中獲取了第二次傳的參數(shù)args2，并且返回了that的執(zhí)行。此處的that就是原函數(shù)，執(zhí)行該原函數(shù)綁定原函數(shù)this的時(shí)候要注意判斷。如果this是構(gòu)造函數(shù)bindFn new出來的實(shí)例，那么此處的this一定是該實(shí)例本身。反之，則是bind方法傳遞的this(context)。最后再把兩次獲得的參數(shù)通過concat()連接起來傳遞進(jìn)去，這樣就實(shí)現(xiàn)了前3條。
最后一條：構(gòu)造函數(shù)上的屬性和方法，每個(gè)實(shí)例上都有。 此處通過一個(gè)中間函數(shù)Fn，來連接原型鏈。Fn的prototype等于this的prototype。Fn和this指向同一個(gè)原型對(duì)象。bindFn的prototype又等于Fn的實(shí)例。Fn的實(shí)例的__proto__又指向Fn的prototype。即bindFn的prototype指向和this的prototype一樣，指向同一個(gè)原型對(duì)象。至此，就實(shí)現(xiàn)了自己的bind方法。
代碼寫好了， 測試一下吧~

Function.prototype.mybind = function(context){
    let that = this;
    let args1 = Array.prototype.slice.call(arguments,1);
    let bindFn = function(){
        let args2 = Array.prototype.slice.call(arguments);
        return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); 
    }
    let Fn = function(){};
    Fn.prototype = this.prototype;
    bindFn.prototype = new Fn();
    return bindFn;
}

let obj = {
    name:"tiger"
}

function fn(name,age){
    this.say = "汪汪~";
    console.log(this);
    console.log(this.name+"養(yǎng)了一只"+name+","+age+"歲了 ");
}

/** 第一次傳參 */
let bindFn = fn.mybind(obj,"

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109115.html

相關(guān)文章

  • js函數(shù)this理解？手寫apply、call、bind就夠了

    摘要：一是什么函數(shù)的內(nèi)部屬性，引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。函數(shù)做為節(jié)點(diǎn)事件調(diào)用時(shí)指向節(jié)點(diǎn)本身做為構(gòu)造函數(shù)實(shí)力化方法時(shí)指向?qū)嵗龑?duì)象箭頭函數(shù)里的普通函數(shù)，由于閉包函數(shù)是執(zhí)行的，所以指向箭頭函數(shù)的指向函數(shù)創(chuàng)建時(shí)的作用域。 一、this是什么？ 函數(shù)的內(nèi)部屬性，this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。也就是說函數(shù)的this會(huì)指向調(diào)用函數(shù)的執(zhí)行環(huán)境。 function a(){ retur...

    Cciradih 評(píng)論0 收藏0

  • 「中高級(jí)前端面試」JavaScript手寫代碼無敵秘籍

    摘要：第一種直接調(diào)用避免在不必要的情況下使用，是一個(gè)危險(xiǎn)的函數(shù)，他執(zhí)行的代碼擁有著執(zhí)行者的權(quán)利。來自于此外，實(shí)現(xiàn)需要考慮實(shí)例化后對(duì)原型鏈的影響。函數(shù)柯里化的主要作用和特點(diǎn)就是參數(shù)復(fù)用提前返回和延遲執(zhí)行。手寫路徑導(dǎo)航 實(shí)現(xiàn)一個(gè)new操作符 實(shí)現(xiàn)一個(gè)JSON.stringify 實(shí)現(xiàn)一個(gè)JSON.parse 實(shí)現(xiàn)一個(gè)call或 apply 實(shí)現(xiàn)一個(gè)Function.bind 實(shí)現(xiàn)一個(gè)繼承 實(shí)現(xiàn)一個(gè)J...

    Zhuxy 評(píng)論0 收藏0

  • 22道JavaScript高頻手寫面試題

    JavaScript筆試部分 點(diǎn)擊關(guān)注本公眾號(hào)獲取文檔最新更新,并可以領(lǐng)取配套于本指南的 《前端面試手冊(cè)》 以及最標(biāo)準(zhǔn)的簡歷模板. 實(shí)現(xiàn)防抖函數(shù)（debounce） 防抖函數(shù)原理：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。 那么與節(jié)流函數(shù)的區(qū)別直接看這個(gè)動(dòng)畫實(shí)現(xiàn)即可。 showImg(https://segmentfault.com/img/remote/146000002...

    Alan 評(píng)論0 收藏0

  • JS 筆試手寫代碼

    摘要：版本假設(shè)字符每個(gè)字符編碼小于等于為字符串長度。將數(shù)組的元素依次傳入一個(gè)函數(shù)中執(zhí)行，然后把它們的返回值組成一個(gè)新數(shù)組返回。復(fù)制代碼造輪子的同學(xué)注意數(shù)組的空元素不會(huì)再上述方法中遍歷出來。復(fù)制代碼方法，對(duì)數(shù)組進(jìn)行洗牌。 contains方法：判定一個(gè)字符串是否包含另一個(gè)字符串。常規(guī)思維，使用正則，但每次都要用new RegExp來構(gòu)造，太麻煩，性能太差。轉(zhuǎn)而使用原生字符串方法。如indexO...

    baiy 評(píng)論0 收藏0

  • 手寫call、apply、bind及相關(guān)面試題解析

    摘要：我是前端我的全名是我是一個(gè)前端指向接收多個(gè)參數(shù)，第一個(gè)是返回值返回值是一個(gè)函數(shù)上下文的，不會(huì)立即執(zhí)行?？吕锘嚓P(guān)講解請(qǐng)移步簡版的實(shí)現(xiàn)就算完成了歡迎吐槽點(diǎn)贊 它們有什么不同？怎么用？ call 接收多個(gè)參數(shù)，第一個(gè)為函數(shù)上下文也就是this，后邊參數(shù)為函數(shù)本身的參數(shù)。 let obj = { name: 一個(gè) } ...

    TwIStOy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<