update: 2018-06-08

原文鏈接

為何要本身去完成一個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的原型鏈和繼續會有協助～

好啦就如許，晚安美夢了列位🌛✨