js中的call()、apply()、bind()方法詳解
這三個方法都有一個共同的功能:改變this的指向,那麼又是怎麼改變的呢?接下來我們依次來分析這三個方法
1、call()方法
說明:傳入多個引數,第一個是this的指向,之後的引數都是函式的引數。
例如:B.call(A, args1,args2);即A物件呼叫B物件的方法。
window.name = "window"; p = { name : "Andy", age : 18 } functionsay1(){ console.log(this.name); } function say2(s1,s2){ console.log("和是:" + (s1+s2)); }
say1(); //window say1.call(window); //window say1.call(p); //Andy say2.call('',1,2); //和是3 被呼叫的物件可以沒有
上面這個例子當呼叫say1.call(p)時this指向就變了,如果只是say1()的話是預設繫結,this指向window,但是使用say1.call(p)之後變成了顯示繫結,this指向了傳入的第一個引數p
下面這個例子中的意思就是用 add 來替換 sub,add.call(sub,3,1) == add(3,1) ,所以執行結果為:alert(4);
function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1)
call 的意思是把 animal 的方法放到cat上執行,原來cat是沒有showName() 方法,現在是把animal 的showName()方法放到 cat上來執行,所以this.name 應該是 Cat
functionAnimal(){ this.name = "Animal"; this.showName = function(){ console.log(this.name); } } function Cat(){ this.name = "Cat"; } var animal = new Animal(); var cat = new Cat(); //通過call或apply方法,將原本屬於Animal物件的showName()方法交給物件cat來使用了。 animal.showName.call(cat); //Cat //animal.showName.apply(cat);
2、apply()方法
說明:傳入兩個引數,第一個引數就是this的指向,第二個引數就是函式引數組成的陣列。
例如:B.apply(A, arguments);即A物件應用B物件的方法。
apply()方法和call()方法十分類似,只需要注意第二個引數是陣列就行,這裡就不過多重複解釋了
3、bind()方法
說明:bind()方法建立一個新的函式,在bind()被呼叫時,這個新函式的this被bind的第一個引數指定,其餘的引數將作為新函式的引數供呼叫時使用。
最後我們對比一下call、apply、bind的傳參情況
var obj = { name: '萌萌', age: this.age, myFun: function (come,walk){ console.log(this.name + "年齡" + this.age + "從" + come + "去" + walk); } } var p = { name: "白白", age: 18 } obj.myFun.call(p,'安徽','蘇州'); obj.myFun.apply(p,['安徽','蘇州']); obj.myFun.bind(p,'安徽','蘇州')();