循序漸進的用js實現乙個bind

author： thomaszhou

一般我們會直接使用bind函式，但是這次我們通過原生js來嘗試實現這個函式

bind() 方法會建立乙個新函式。當這個新函式被呼叫時，bind() 的第乙個引數將作為它執行時的 this，之後的一串行引數將會在傳遞的實參前傳入作為它的引數

由此我們可以首先得出 bind 函式的三個特點：

（2）可以傳入引數：我們用 arguments 進行處理

var foo = ;
function bar(name, age) 
var bindfoo = bar.bind(foo, 'daisy'); // （1）bindfoo是乙個函式
bindfoo('18'); // （2）此處可以再次傳入引數
// 1
// daisy
// 18
複製**

先實現前兩個特點：實現**(version 1.0)：

function.prototype.bind2 = function (context) 
}複製**

var value = 2;
var foo = ;
function bar(name, age) 
bar.prototype.friend = 'kevin';
var bindfoo = bar.bind(foo, 'daisy');
var obj = new bindfoo('18'); // this 已經指向了 obj
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
複製**

注意：儘管在全域性和 foo 中都宣告了 value 值，最後依然返回了 undefind，說明繫結的 this 失效了

先實現第三個特點：實現**(version 2.0)：

function.prototype.bind2 = function (context) 
let args = array.prototype.slice.call(arguments, 1);
let fbound = function
() ;
// 為了要讓 this instanceof self為true，就要使建立的例項繼承繫結函式bar，
// 唯一辦法就是讓建立例項的函式fbound的prototype指向bar函式的prototype
fbound.prototype = this.prototype;
return fbound;
};複製**

優化：實現**(version 3.0)：

version 2.0 直接將fbound.prototype = this.prototype，我們直接修改fbound.prototype 的時候，也會直接修改函式bar的 prototype。這個時候，我們可以通過乙個空函式來進行中轉，然後利用組合繼承的方式來實現

function.prototype.bind2 = function (context) ; // // 定義乙個中間函式，用於作為繼承的中間值
var fbound = function
() // 先讓 fnop 的原型方法指向 this 即函式bar的原型方法，繼承 this 的屬性
fnop.prototype = this.prototype;
// 再將 fbound 即要返回的新函式的原型方法指向 fnop 的例項化物件
// 這樣，既能讓 fbound 繼承 this 的屬性，在修改其原型鏈時，又不會影響到 this 的原型鏈
fbound.prototype = new fnop();
return fbound;
}複製**

在上面的**中，我們引入了乙個新的函式 fun，用於繼承原函式的原型，並通過 new 操作符例項化出它的例項物件，供 fbound 的原型繼承，至此，我們既讓新函式繼承了原函式的所有屬性與方法，又保證了不會因為其對原型鏈的操作影響到原函式

-------------優化三點-------------------------

function.prototype.bind = function.prototype.bind || function
() ;
複製**

if (typeof this !== 'function') 
複製**

function.prototype.bind = function.prototype.bind || function (context, ...formerargs) 
let fnop = function
() {}; 
let fbound = function (...laterargs) ;
fnop.prototype = this.prototype;
fbound.prototype = new fnop();
return fbound;
};複製**

循序漸進的用js實現乙個bind

實現機器學習的循序漸進指南VI AdaBoost

用原生js實現乙個new？

用原生js實現乙個new方法

循序漸進的用js實現乙個bind

實現機器學習的循序漸進指南VI AdaBoost

用原生js實現乙個new？

用原生js實現乙個new方法

相關推薦