1. 程式人生 > 其它 >js中的call()、apply()、bind()方法詳解

js中的call()、apply()、bind()方法詳解

 這三個方法都有一個共同的功能:改變this的指向,那麼又是怎麼改變的呢?接下來我們依次來分析這三個方法

1、call()方法

說明:傳入多個引數,第一個是this的指向,之後的引數都是函式的引數。

例如:B.call(A, args1,args2);即A物件呼叫B物件的方法。  

    window.name = "window";
    p = {
        name : "Andy",
        age : 18
    }
    function
say1(){ 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

function
Animal(){ 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,'安徽','蘇州')();