手動實現bind函數（附MDN提供的Polyfill方案解析）

update: 2018-06-05

原文連接

爲何要本身去實現一個bind函數？

bind()函數在 ECMA-262 第五版才被加入；它可能沒法在全部瀏覽器上運行。

因此，爲了理想主義和世界和平（全部瀏覽器上都能爲所欲爲調用它），必要的時候須要咱們本身去實現一個bind。那麼，一個bind函數須要具有什麼功能呢？

bind函數的核心做用：綁定this、初始化參數

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

語法：fun.bind(thisArg[, arg1[, arg2[, ...]]])

bind()方法建立一個新的函數, 當被調用時，將其this關鍵字設置爲提供的值（thisArg）。

被調用時，arg一、arg2等參數將置於實參以前傳遞給被綁定的方法。

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

鑑於這兩個核心做用，咱們能夠來實現一個簡單版看看：

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是執行綁定函數時的實參
    }
  }
}
複製代碼

因爲arguments是類數組對象，不擁有數組的slice方法，因此須要經過call來將slice的this指向arguments。args就是調用bind時傳入的初始化參數（剔除了第一個參數oThis）。將args與綁定函數執行時的實參arguments經過concat連起來做爲參數傳入，就實現了bind函數初始化參數的效果。

bind函數的另一個也是最主要的做用：綁定this指向，就是經過將調用bind時的this（self）指向指定的oThis來完成。這樣當咱們要使用bind綁定某個對象時，執行綁定函數，它的this就永遠固定爲指定的對象了～

遇到new操做符的時候呢

到這裏，咱們已經能夠用上面的版原本使用大部分場景了。可是～

可是，這種方案就像前面說的，它會永遠地爲綁定函數固定this爲指定的對象。若是你仔細看過MDN關於bind的描述，你會發現還有一個狀況除外：

thisArg：當使用new 操做符調用綁定函數時，該參數無效。

一個綁定函數也能使用new操做符建立對象：這種行爲就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

咱們能夠經過一個示例來試試看原生的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
複製代碼

試驗結果發現，obj.name依然是lily而沒有變成tom，因此就像MDN描述的那樣，若是綁定函數cat是經過new操做符來建立實例對象的話，this會指向建立的新對象tom，而再也不固定綁定指定的對象obj。

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

那麼，如何才能區分綁定函數有沒有經過new操做符來建立一個實例對象，從而進行分類處理呢？

區分綁定函數是否使用new，分類處理

咱們知道檢測一個對象是否經過某個構造函數使用new實例化出來的最快的方式是經過 instanceof：

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

那麼，咱們就能夠這樣來實現這個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建立
        return self.apply(_this, args.concat(Array.prototype.slice.call(arguments)))
    }
    
    if (this.prototype) {
      fBound.prototype = this.prototype
    } 
	return fBound
  }
}
複製代碼

假設咱們將調用bind的函數稱爲C，將fBound的prototype原型對象指向C的prototype原型對象（上例中就是self），這樣的話若是將fBound做爲構造函數（使用new操做符）實例化一個對象，那麼這個對象也是C的實例，this instanceof self就會返回true。這時就將self指向新建立的對象的this上就能夠達到原生bind的效果了（再也不固定指定的this）。不然，才使用oThis，即綁定指定的this。

可是這樣作會有什麼影響？將fBound的prototype原型對象直接指向self的prototype原型對象，那麼當修改fBound的prototype對象時，self（上述C函數）的prototype對象也會被修改！！考慮到這個問題，咱們須要另一個function來幫咱們作箇中間人來避免這個問題，咱們看看MDN是怎麼實現bind的。

MDN提供的Polyfill方案 及 YUI庫extend函數實現

MDN針對bind沒有被普遍支持的兼容性提供了一個實現方案：

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一塊兒傳進來的實參
      fToBind = this,
      fNOP    = function() {},
      fBound  = function() {
        return fToBind.apply(this instanceof fNOP
          ? this
          : oThis,
          // 獲取調用時(fBound)的傳參.bind 返回的函數入參每每是這麼傳遞的
          aArgs.concat(Array.prototype.slice.call(arguments)));
      };

    // 維護原型關係
    if (this.prototype) {
      // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } fBound.prototype = new fNOP(); return fBound; }; } 複製代碼

發現了嗎，和上面通過改造的方案相比，最主要的差別就在於它定義了一個空的function fNOP，經過fNOP來傳遞原型對象給fBound（經過實例化的方式）。這時，修改fBound的prototype對象，就不會影響到self的prototype對象啦～並且fNOP是空對象，因此幾乎不佔內存。

其實這個思路也是YUI庫如何實現繼承的方法。他的extend函數以下：

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

複製代碼

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

總結

實現一個原生的函數，最重要的是理清楚它的做用和功能，而後逐一去實現它們包括細節，基本上就不會有問題～

這裏用到的一些關於prototype和instanceof的具體含義，能夠參考阮一峯老師的 prototype 對象，相信對你理解JavaScript的原型鏈和繼承會有幫助～

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