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

資訊專欄INFORMATION COLUMN

手動實現(xiàn)bind函數(shù)（附MDN提供的Polyfill方案解析）

idisfkj / 932人閱讀

摘要：被調(diào)用時，等參數(shù)將置于實參之前傳遞給被綁定的方法。它返回由指定的值和初始化參數(shù)改造的原函數(shù)拷貝。一個綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。其實這個思路也是庫如何實現(xiàn)繼承的方法。他的函數(shù)如下最后一步是將的指回。

update: 2018-06-08

原文鏈接

為什么要自己去實現(xiàn)一個bind函數(shù)？

bind()函數(shù)在 ECMA-262 第五版才被加入；它可能無法在所有瀏覽器上運行。

所以，為了理想主義和世界和平（所有瀏覽器上都能隨心所欲調(diào)用它），必要的時候需要我們自己去實現(xiàn)一個bind。那么，一個bind函數(shù)需要具備什么功能呢？

bind函數(shù)的核心作用：綁定this、初始化參數(shù)

綁定this、定義初始化參數(shù)是它存在的主要意義和價值。MDN對它的定義如下：

語法：fun.bind(thisArg[, arg1[, arg2[, ...]]])
bind()方法創(chuàng)建一個新的函數(shù), 當(dāng)被調(diào)用時，將其this關(guān)鍵字設(shè)置為提供的值（thisArg）。


被調(diào)用時，arg1、arg2等參數(shù)將置于實參之前傳遞給被綁定的方法。


它返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。

鑒于這兩個核心作用，我們可以來實現(xiàn)一個簡單版看看：

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
      if (typeof this !== "function") {
      return
    }
  
    let self = this
    let args = Array.prototype.slice.call(arguments, 1)
    return function () {
      return self.apply(oThis, args.concat(Array.prototype.slice.call(arguments))) //這里的arguments是執(zhí)行綁定函數(shù)時的實參
    }
  }
}

由于arguments是類數(shù)組對象，不擁有數(shù)組的slice方法，所以需要通過call來將slice的this指向arguments。args就是調(diào)用bind時傳入的初始化參數(shù)（剔除了第一個參數(shù)oThis）。將args與綁定函數(shù)執(zhí)行時的實參arguments通過concat連起來作為參數(shù)傳入，就實現(xiàn)了bind函數(shù)初始化參數(shù)的效果。

bind函數(shù)的另外一個也是最主要的作用：綁定this指向，就是通過將調(diào)用bind時的this（self）指向指定的oThis來完成。這樣當(dāng)我們要使用bind綁定某個對象時，執(zhí)行綁定函數(shù)，它的this就永遠(yuǎn)固定為指定的對象了～

遇到new操作符的時候呢

到這里，我們已經(jīng)可以用上面的版本來使用大部分場景了。但是～

但是，這種方案就像前面說的，它會永遠(yuǎn)地為綁定函數(shù)固定this為指定的對象。如果你仔細(xì)看過MDN關(guān)于bind的描述，你會發(fā)現(xiàn)還有一個情況除外：

thisArg：當(dāng)使用new 操作符調(diào)用綁定函數(shù)時，該參數(shù)無效。
一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。

我們可以通過一個示例來試試看原生的bind對于使用new的情況是如何的：

function animal(name) {
    this.name = name
}
let obj = {}

let cat = animal.bind(obj)
cat("lily")
console.log(obj.name)  //lily

let tom = new cat("tom")
console.log(obj.name)  //lily
console.log(tom.name)  //tom

試驗結(jié)果發(fā)現(xiàn)，obj.name依然是lily而沒有變成tom，所以就像MDN描述的那樣，如果綁定函數(shù)cat是通過new操作符來創(chuàng)建實例對象的話，this會指向創(chuàng)建的新對象tom，而不再固定綁定指定的對象obj。

而上面的簡易版卻沒有這樣的能力，它能做到的只是永久地綁定指定的this（有興趣的胖友可以在控制臺使用簡易版bind試下這個例子看看結(jié)果）。這顯然不能很好地替代原生的bind函數(shù)～

那么，如何才能區(qū)分綁定函數(shù)有沒有通過new操作符來創(chuàng)建一個實例對象，從而進(jìn)行分類處理呢？

區(qū)分綁定函數(shù)是否使用new，分類處理

我們知道檢測一個對象是否通過某個構(gòu)造函數(shù)使用new實例化出來的最快的方式是通過 instanceof：

A instanceof B //驗證A是否為B的實例

那么，我們就可以這樣來實現(xiàn)這個bind：

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
      if (typeof this !== "function") {
      return
    }
    
    let self = this
    let args = Array.prototype.slice.call(arguments, 1)
    let fBound = function() {
        let _this = this instanceof self ? this : oThis //檢測是否使用new創(chuàng)建
        return self.apply(_this, args.concat(Array.prototype.slice.call(arguments)))
    }
    
    if (this.prototype) {
      fBound.prototype = this.prototype
    } 
    return fBound
  }
}

假設(shè)我們將調(diào)用bind的函數(shù)稱為C，將fBound的prototype原型對象指向C的prototype原型對象（上例中就是self），這樣的話如果將fBound作為構(gòu)造函數(shù)（使用new操作符）實例化一個對象，那么這個對象也是C的實例，this instanceof self就會返回true。這時就將self指向新創(chuàng)建的對象的this上就可以達(dá)到原生bind的效果了（不再固定指定的this）。否則，才使用oThis，即綁定指定的this。

但是這樣做會有什么影響？將fBound的prototype原型對象直接指向self的prototype原型對象，那么當(dāng)修改fBound的prototype對象時，self（上述C函數(shù)）的prototype對象也會被修改?。?/strong>考慮到這個問題，我們需要另外一個function來幫我們做個中間人來避免這個問題，我們看看MDN是怎么實現(xiàn)bind的。

MDN提供的Polyfill方案 及 YUI庫extend函數(shù)實現(xiàn)

MDN針對bind沒有被廣泛支持的兼容性提供了一個實現(xiàn)方案：

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),//這里的arguments是跟oThis一起傳進(jìn)來的實參
      fToBind = this,
      fNOP    = function() {},
      fBound  = function() {
        return fToBind.apply(this instanceof fNOP
          ? this
          : oThis,
          // 獲取調(diào)用時(fBound)的傳參.bind 返回的函數(shù)入?yún)⑼沁@么傳遞的
          aArgs.concat(Array.prototype.slice.call(arguments)));
      };

    // 維護(hù)原型關(guān)系
    if (this.prototype) {
      // Function.prototype doesn"t have a prototype property
      fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

發(fā)現(xiàn)了嗎，和上面經(jīng)過改造的方案相比，最主要的差異就在于它定義了一個空的function fNOP，通過fNOP來傳遞原型對象給fBound（通過實例化的方式）。這時，修改fBound的prototype對象，就不會影響到self的prototype對象啦～而且fNOP是空對象，所以幾乎不占內(nèi)存。

其實這個思路也是YUI庫如何實現(xiàn)繼承的方法。他的extend函數(shù)如下：

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

最后一步是將Child的constructor指回Child。

總結(jié)

實現(xiàn)一個原生的函數(shù)，最重要的是理清楚它的作用和功能，然后逐一去實現(xiàn)它們包括細(xì)節(jié)，基本上就不會有問題～

這里用到的一些關(guān)于prototype和instanceof的具體含義，可以參考阮一峰老師的 prototype 對象，相信對你理解JavaScript的原型鏈和繼承會有幫助～

好啦就這樣，晚安好夢了各位

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

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

相關(guān)文章

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆粒化基礎(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    Carson 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    rockswang 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時，將第一個參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆粒化基礎(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實，以及邏輯、思維能力和臨場表現(xiàn)，題目是：模擬實現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會有思路來解答。社區(qū)上關(guān)于原生bind的研...

    jlanglang 評論0 收藏0

  • 關(guān)于JS函數(shù)的bind

    摘要：昨天被人問到的的作用是什么這個倒還能回答出來，之后返回一個新的函數(shù)，這個函數(shù)可以保持傳遞的上下文。沒有完全實現(xiàn)規(guī)定的。比如規(guī)定了的和行為。 https://friskfly.github.io/2016/03/24/about-function-bind-in-js/ 昨天被人問到j(luò)s的bind的作用是什么？ 這個倒還能回答出來，bind 之后返回一個新的函數(shù)，這個函數(shù)可以保持傳遞的t...

    CloudwiseAPM 評論0 收藏0

  • 面試題目別有洞天 -> 從es6優(yōu)雅解法，到降級polyfill，再到redux reduce

    摘要：每次被執(zhí)行時，和被傳入，這個根據(jù)進(jìn)行累加或者是自身消減，英文原意，進(jìn)而返回最新的。 之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進(jìn)階Pollyfill，今天再分享一個有意思的題目。 從解這道題目出發(fā)，我會談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩人章碣《對月》詩中所云：別有洞天三十六，水...

    econi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<