為什么要自己去實現一個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函數如下：
如何實現 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的原型鏈和繼承會有幫助～
原文鏈接：https://lvdingjin.github.io/tech/2018/06/05/achieve-bind.html
