模擬實(shí)現(xiàn)bind方法

array_huang 發(fā)布于2019-08-23 13:44 / 2103人閱讀

摘要：前言最近接觸到方法，為了加深理解，自己模擬實(shí)現(xiàn)一下。我們模擬的方法參考上的。基本上關(guān)于模擬的實(shí)現(xiàn)就是這樣。所以不能肯定剛才的就是總結(jié)完全重寫構(gòu)造函數(shù)原型對(duì)象要放在構(gòu)造函數(shù)后面，如果放在構(gòu)造函數(shù)里面，可能原型鏈會(huì)有錯(cuò)誤。

前言

最近接觸到bind方法，為了加深理解，自己模擬實(shí)現(xiàn)一下。

首先，談一下bind()方法的特點(diǎn):

把調(diào)用bind()的函數(shù)(以后統(tǒng)稱為初試函數(shù))中的this指向綁定到某個(gè)對(duì)象上，bind的第二個(gè)及其以后的參數(shù)作為作為初始函數(shù)的 參數(shù)，bind()執(zhí)行完返回一個(gè)新的函數(shù)。

新返回的函數(shù)如果用 new 字符來調(diào)用的話，那么之前this指向綁定到某個(gè)對(duì)象上將會(huì)失效，并且初始函數(shù)中的this指向綁定到 new調(diào)用的函數(shù)實(shí)例上。函數(shù)實(shí)例上還可以調(diào)用初始函數(shù)的原型上的方法

那么先實(shí)現(xiàn)第一個(gè)特點(diǎn)

// 因?yàn)樾枰泻瘮?shù)都能執(zhí)行，所以綁定到Function.prototype上
Function.prototype.bindFn=function(thisArg) {
   if(typeof this !== "function") {
         throw new TypeError(this+" is not a function");
   }
   
   // 調(diào)用bindFn方法的函數(shù)的引用
   var self = this;
   // 以數(shù)組形式保存第二個(gè)及其以后的參數(shù)
   var beforeArg = [].slice.call(arguments,1);

   var bound = function() {
        // 以數(shù)組形式保存著當(dāng)前函數(shù)的所有參數(shù)
        var afterArg = [].slice.call(arguments);
        // bindFn第二個(gè)及其以后的參數(shù)和當(dāng)前函數(shù)所有參數(shù)的 集合
        // 全部傳到self函數(shù)的參數(shù)里
        var finalArgs = beforeArg.concat(afterArg);
        // self中的this指向綁定到 thisArg
        return  self.apply(thisArg, finalArgs);
   }
   return bound;
}
var obj1={sex:23};

function m1(a,b) {
    console.log(a+b); // 6
    console.log(this); // {sex:23}
}

var bound=m1.bindFn(obj1,2);
var result=bound(4);

可見m1中的this指向了obj1對(duì)象，2,4分別傳給了形參a,b。

進(jìn)一步完善bindFn,實(shí)現(xiàn)第二個(gè)特點(diǎn)

// 因?yàn)樾枰泻瘮?shù)都能執(zhí)行，所以綁定到Function.prototype上
Function.prototype.bindFn=function(thisArg) {
   if(typeof this !== "function") {
         throw new TypeError(this +" is not a function");
   }
   
   // 調(diào)用bindFn方法的函數(shù)的引用
   var self = this;
   // 以數(shù)組形式保存第二個(gè)及其以后的參數(shù)
   var beforeArg = [].slice.call(arguments,1);

   var bound = function() {
        // 以數(shù)組形式保存著當(dāng)前函數(shù)的所有參數(shù)
        var afterArg = [].slice.call(arguments);
        // bindFn第二個(gè)及其以后的參數(shù)和當(dāng)前函數(shù)所有參數(shù)的 集合
        // 全部傳到self函數(shù)的參數(shù)里
        var finalArgs = beforeArg.concat(afterArg);
        // 如果new調(diào)用的話，this指向?qū)嵗龑?duì)象
        // 否則this指向需要綁定的對(duì)象
        // this instanceof bound并不準(zhǔn)確，可以用es6中的new.target來解決
        return  self.apply(this instanceof bound ? this : thisArg, finalArgs);
   }
   
   // new調(diào)用的時(shí)候有用
   // 避免es6中的箭頭函數(shù)
   // 箭頭函數(shù)沒有prototype
   if(this.prototype) {
         // 避免修改 bound.prototype 污染到 this.prototype
      function a(){}
      a.prototype=this.prototype;
      bound.prototype=new a();
      bound.prototype.constructor=bound;
   }
   return bound;
}
var obj1={sex:23};

function m1(a,b) {
    this.name="m1";
    console.log(a+b); // 6
    console.log(this); // {name:"m1"}
}

m1.prototype.allKey=function() {
    console.log("this is allkey");
}

var bound=m1.bindFn(obj1,2);
var result=new bound(4); 
result.allKey(); // this is allkey

可見，m1中的this指向了result這個(gè)實(shí)例對(duì)象，并且result 通過原型鏈繼承了m1.prototype上的方法。

那么我們看下官方bind的使用:

// 關(guān)鍵部分
function m1(a,b) {
    this.name="m1";
    console.log(a+b); // 6
    console.log(this); // {name:"m1"}
}
var bound=m1.bind(obj1,2);
var result=new bound(4); 
result.allKey(); // this is allkey

由上圖可見，雖然原型鏈上有所不同，但我們模擬的方法還是實(shí)現(xiàn)了bind的功能。我們模擬的方法bindFn參考mdn上的Polyfill。基本上關(guān)于模擬bind的實(shí)現(xiàn)就是這樣。

現(xiàn)在我們?cè)谘由煲幌玛P(guān)于原型鏈的知識(shí)，如果剛才的bound.prototype完全重寫在了bound構(gòu)造函數(shù)內(nèi)，又會(huì)怎樣？

// 因?yàn)樾枰泻瘮?shù)都能執(zhí)行，所以綁定到Function.prototype上
Function.prototype.bindFn=function(thisArg) {
   if(typeof this !== "function") {
         throw new TypeError(this +": is not a function");
   }
   
   // 調(diào)用bindFn方法的函數(shù)的引用
   var self = this;
   // 以數(shù)組形式保存第二個(gè)及其以后的參數(shù)
   var beforeArg = [].slice.call(arguments,1);

   var bound = function() {
        // 以數(shù)組形式保存著當(dāng)前函數(shù)的所有參數(shù)
        var afterArg = [].slice.call(arguments);
        // bindFn第二個(gè)及其以后的參數(shù)和當(dāng)前函數(shù)所有參數(shù)的 集合
        // 全部傳到self函數(shù)的參數(shù)里
        var finalArgs = beforeArg.concat(afterArg);
        // 用new 方式調(diào)用
        if(this instanceof bound) {
             // 避免es6箭頭函數(shù)
             // 箭頭函數(shù)沒有prototype
         if(self.prototype) {
                 // 避免修改 bound.prototype 污染到 self.prototype
              function a(){}
              a.prototype=self.prototype;
              bound.prototype=new a();
              bound.prototype.constructor=bound;
            
         }
         // self中的this指向 new生成的實(shí)例對(duì)象
            return self.apply(this,finalArgs);
        }
        // 無new 調(diào)用方式， self中的this指向thisArg
        return  self.apply(thisArg, finalArgs);
   }
     bound.prototype.getKey=function() {

              }
   return bound;
};
var obj1={sex:23};

function m1(a,b) {
    this.name="m1";
    console.log(a+b); // 6
    console.log(this);  
}

m1.prototype.allKey=function() {
    console.log("this is allkey");
}

var bound=m1.bindFn(obj1,2);
var result=new bound(4); 
result.allKey(); // 報(bào)錯(cuò) result.allKey is not a function

按理說 result原型鏈上應(yīng)該有allKey方法的，結(jié)果卻報(bào)錯(cuò)了，我們把m1中的this打印一下看看

這里我們看到原型鏈上并沒有m1.prototype, 所以在構(gòu)造函數(shù)內(nèi)部 完全重寫 構(gòu)造函數(shù)原型對(duì)象的話，原型鏈會(huì)與預(yù)想的不同。

那么圖上的bound.prototype打個(gè) ？，因?yàn)椴⒉淮_定這個(gè)是bound.prototype,如果真是bound.prototype的話，那么下面的話如何解釋？

console.log(result.__proto__ === bound.prototype ) // false

按理說 result.__proto__ 指向的是bound.prototype，結(jié)果卻為false。所以不能肯定剛才的就是bound.prototype

總結(jié)：完全重寫構(gòu)造函數(shù)原型對(duì)象要放在構(gòu)造函數(shù)后面，如果放在構(gòu)造函數(shù)里面，可能原型鏈會(huì)有錯(cuò)誤。

云服務(wù)器 GPU云服務(wù)器 bind()方法 bind方法模擬實(shí)現(xiàn) 實(shí)現(xiàn)模擬加載

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/99462.html

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

登陸后可評(píng)論

0條評(píng)論

array_huang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

?? 程序員【代碼管理】工具介紹??，熱門語言更新這么快，你繞不過這一關(guān)的！

閱讀 3440·2021-09-26 09:46
Hostodo：九月優(yōu)惠上線，1核/1.5G/25G NVMe/8T/1Gbps/年付$34.99，

閱讀 2788·2021-09-13 10:23
探討HTTPS和HTTP網(wǎng)址格式對(duì)于網(wǎng)站SEO是否有影響

閱讀 3526·2021-09-07 10:24
【整理】幾種解決inline-block間隙的方案

閱讀 2396·2019-08-29 13:20
Front-end-Developer-Interview-Questions

閱讀 2923·2019-08-28 17:57
一次react滾動(dòng)列表的實(shí)踐---兼容ios安卓

閱讀 3078·2019-08-26 13:27
【前端工程師手冊(cè)】總結(jié)一下前端存儲(chǔ)

閱讀 1184·2019-08-26 12:09
JavaScript壓縮圖片，使用Canvas壓縮圖片

閱讀 512·2019-08-26 10:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

模擬實(shí)現(xiàn)bind方法

相關(guān)文章

【進(jìn)階3-4期】深度解析bind原理、使用場(chǎng)景及模擬實(shí)現(xiàn)

JavaScript專題之模擬實(shí)現(xiàn)bind

**面試官問：能否模擬實(shí)現(xiàn)JS的bind方法**

JavaScript深入之bind的模擬實(shí)現(xiàn)

call、bind的模擬實(shí)現(xiàn)

JavaScript進(jìn)階之模擬call,apply和bind

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

0條評(píng)論

array_huang

男|高級(jí)講師

TA的文章

?? 程序員【代碼管理】工具介紹??，熱門語言更新這么快，你繞不過這一關(guān)的！

Hostodo：九月優(yōu)惠上線，1核/1.5G/25G NVMe/8T/1Gbps/年付$34.99，

探討HTTPS和HTTP網(wǎng)址格式對(duì)于網(wǎng)站SEO是否有影響

【整理】幾種解決inline-block間隙的方案

Front-end-Developer-Interview-Questions

一次react滾動(dòng)列表的實(shí)踐---兼容ios安卓

【前端工程師手冊(cè)】總結(jié)一下前端存儲(chǔ)

JavaScript壓縮圖片，使用Canvas壓縮圖片

最新活動(dòng)