手寫JavaScript中的bind方法

AZmake 發布于2019-08-26 13:35 / 2970人閱讀

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

之前已經實現過了call，apply和new。今天順便把bind也實現下。
首先：

bind方法返回的是一個綁定this后的函數，并且該函數并沒有執行，需要手動去調用。(從這一點看bind函數就是一個高階函數，而且和call，apply方法有區別)。

bind方法可以綁定this，傳遞參數。注意，這個參數可以分多次傳遞。

如果bind綁定后的函數被new了，那么此時this指向就發生改變。此時的this就是當前函數的實例。

構造函數上的屬性和方法，每個實例上都有。

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;
}

首先獲取到第一次傳遞的參數args1，此處要做截取處理，因為第一個參數是this。接下來聲明一個函數bindFn，在該bindFn中獲取了第二次傳的參數args2，并且返回了that的執行。此處的that就是原函數，執行該原函數綁定原函數this的時候要注意判斷。如果this是構造函數bindFn new出來的實例，那么此處的this一定是該實例本身。反之，則是bind方法傳遞的this(context)。最后再把兩次獲得的參數通過concat()連接起來傳遞進去，這樣就實現了前3條。
最后一條：構造函數上的屬性和方法，每個實例上都有。此處通過一個中間函數Fn，來連接原型鏈。Fn的prototype等于this的prototype。Fn和this指向同一個原型對象。bindFn的prototype又等于Fn的實例。Fn的實例的__proto__又指向Fn的prototype。即bindFn的prototype指向和this的prototype一樣，指向同一個原型對象。至此，就實現了自己的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+"養了一只"+name+","+age+"歲了 ");
}

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

云服務器 GPU云服務器 bind()方法 bind方法 javascript_bind javascript_bind用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109115.html

js函數this理解？手寫apply、call、bind就夠了

摘要：一是什么函數的內部屬性，引用的是函數據以執行的環境對象。函數做為節點事件調用時指向節點本身做為構造函數實力化方法時指向實例對象箭頭函數里的普通函數，由于閉包函數是執行的，所以指向箭頭函數的指向函數創建時的作用域。一、this是什么？函數的內部屬性，this引用的是函數據以執行的環境對象。也就是說函數的this會指向調用函數的執行環境。 function a(){ retur...

Cciradih 2019-08-26 10:39 評論0 收藏0
「中高級前端面試」JavaScript手寫代碼無敵秘籍

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

Zhuxy 2019-05-23 16:26 評論0 收藏0
22道JavaScript高頻手寫面試題

JavaScript筆試部分點擊關注本公眾號獲取文檔最新更新,并可以領取配套于本指南的《前端面試手冊》以及最標準的簡歷模板. 實現防抖函數（debounce）防抖函數原理：在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。那么與節流函數的區別直接看這個動畫實現即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 評論0 收藏0
JS 筆試手寫代碼

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

baiy 2019-08-23 10:57 評論0 收藏0
手寫call、apply、bind及相關面試題解析

摘要：我是前端我的全名是我是一個前端指向接收多個參數，第一個是返回值返回值是一個函數上下文的，不會立即執行。柯里化相關講解請移步簡版的實現就算完成了歡迎吐槽點贊它們有什么不同？怎么用？ call 接收多個參數，第一個為函數上下文也就是this，后邊參數為函數本身的參數。 let obj = { name: 一個 } ...

TwIStOy 2019-08-23 14:48 評論0 收藏0