JS中的bind 方法

2021-07-27 16:32:08 字數 2936 閱讀 1248

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 方法

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

JS中的bind 方法

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

理解js中bind方法的使用

bind方法是ecmascript5新增的方法,該方法在mdn上是這麼介紹的 bind 方法建立乙個新的函式 稱為繫結函式 當被呼叫時,將其this關鍵字設定為提供的值,在呼叫新函式時,在任何提供之前提供乙個給定的引數序列。語法 fun.bind thisarg arg1 arg2 引數thisar...