JS中的bind 方法

function.prototype.bind()方法

bind()方法主要就是將函式繫結到某個物件，bind()會建立乙個函式，函式體內的this物件的值會被繫結到傳入bind()第乙個引數的值，例如，f.bind(obj)，實際上可以理解為obj.f()，這時，f函式體內的this自然指向的是obj

例子

var a = 
func();
},	c : 'hello!'
}a.b();
//undefined

注意：這裡的this指向的是全域性作用域，所以會返回undefined

var a = 
func();
},	c : 'hello!'
}a.b();
//hello!

注意：可以通過賦值的方式將this賦值給that

var a = .bind(this);
func();
},	c : 'hello!'
}a.b();
//hello!
var a = 
func.bind(this)();
},	c : 'hello!'
}a.b();
//hello!

注意：當然，也可以通過bind的方式繫結this，上述兩種bind繫結的方式都可以

再看另外一種用法

例子

function f(y, z)
var m = f.bind(, 2);
console.log(m(3));
//6

注意：這裡bind方法會把它的第乙個實參繫結給f函式體內的this，所以這裡的this即指向物件，從第二個引數起，會依次傳遞給原始函式，這裡的第二個引數2，即是f函式的y引數，最後呼叫m(3)的時候，這裡的3便是最後乙個引數z了，所以執行結果為1 + 2 + 3 = 6

分步處理引數的過程其實是乙個典型的函式柯里化的過程（curry）

我們再來看一道題目

var a = document.write;
a('hello');
//error
a.bind(document)('hello');
//hello
a.call(document, 'hello');
//hello

注意：這裡直接呼叫a的話，this指向的是global或window物件，所以會報錯，通過bind或者call的方式繫結this至document物件，即可正常呼叫

可以用bind的方式預定義引數，例子

function list()
var list1 = list(1, 2, 3);
//[1, 2, 3]
//預定義引數
var a = list.bind(undefined, 10);
var list2 = a();
//[10]
var list3 = a(1, 2, 3);
//[10, 1, 2, 3]

注意：這裡的array.prototype.slice.call(arguments)是用來將引數由類陣列轉換為真正的陣列，a的第乙個引數undefined表示this的指向，第二個引數10即表示list中真正的第乙個引數，依次類推

如何自己實現bind方法？

因為bind()函式發布在es5中，因此並不能很好的在所有瀏覽器中執行，需要polyfill，當然現在幾乎所有現代瀏覽器都支援es5

//my_bind方法支援繫結物件
function.prototype.my_bind = function(context)
}//測試
function a()
a();	//''
var b = ;
a.bind(b)();	//kong
a.my_bind(b)();		//kong

上述是最簡單的一種實現方式，僅可用來繫結，不可傳參

更加健壯的方式：

//my_bind方法不僅可以繫結物件，還可以傳參
function.prototype.my_bind = function(context)
}//測試
function a(m, n, o)
var b = ;
a.my_bind(b, 7, 8)(9);		//kong 7 8 9

注意：這裡my_bind函式中args表示的是在bind時傳入的預定義引數，這裡即為7和8，分別表示m和n，return中的innerargs表示的是呼叫a的時候傳入的引數，這裡表示9，即o，最後用concat連線兩個陣列，即為finalargs，所以最後執行的是a(7, 8, 9)，this指向b，實現了乙個完善點的bind方法

處理bind返回的函式如果作為建構函式，搭配new關鍵字出現的話，我們繫結的this就需要被忽略的相容性問題

更加完美的方式

//bind返回的函式如果作為建構函式，搭配new關鍵字出現的話，我們繫結的this就需要被忽略
//處理建構函式場景下的相容
function.prototype.bind = function.prototype.bind || function(context)
var args = array.prototype.slice.call(arguments, 1);
var self = this;
var f = function(){};
f.prototype = this.prototype;
var bound = function()
bound.prototype = new f();
return bound;
}

JS中的bind 方法

JS中的bind 方法

JS中的bind 方法

理解js中bind方法的使用

相關推薦