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

軍長發表於2018-06-05
函式

update: 2018-06-05

原文連結

為什麼要自己去實現一個bind函式？

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

所以，為了理想主義和世界和平（所有瀏覽器上都能隨心所欲呼叫它），必要的時候需要我們自己去實現一個bind。那麼，一個bind函式需要具備什麼功能呢？

bind函式的核心作用：繫結this、初始化引數

繫結this、定義初始化引數是它存在的主要意義和價值。MDN對它的定義如下：

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

bind()方法建立一個新的函式, 當被呼叫時，將其this關鍵字設定為提供的值（thisArg）。

被呼叫時，arg1、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的原型鏈和繼承會有幫助～

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

相關文章