Javascript中call和apply的區別和用法

 

JavaScript中有一個call和apply方法，其做用基本相同，但也有略微的區別。
其實就是更改對象的內部指針，即改變對象的this指向的內容。這在面向對象的js編程過程當中有時是頗有用的。

call函數和apply方法的第一個參數都是要傳入給當前對象的對象，及函數內部的this。後面的參數都是傳遞給當前對象的參數。
以下：

<script>
   var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);
        alert(x);
    }
    myfunc.call(func,"var");
</script>

可見分別彈出了func和var。到這裏就對call的每一個參數的意義有所瞭解了。

對於apply和call二者在做用上是相同的，但二者在參數上有區別的。
對於第一個參數意義都同樣，但對第二個參數：
apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。
如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])
同時使用apply的好處是能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入。
經常使用實例
一、 這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

// 注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

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(){    
        alert(this.name);    
    }    
}    
  
function Cat(){    
    this.name = "Cat";    
}    
   
var animal = new Animal();    
var cat = new Cat();    
    
//經過call或apply方法，將本來屬於Animal對象的showName()方法交給對象cat來使用了。    
//輸入結果爲"Cat"    
animal.showName.call(cat);    
//animal.showName.apply(cat,[]);  

三、 Animal.call(this) 的意思就是使用 Animal對象代替this對象，那麼 Cat中不就有Animal的全部屬性和方法了嗎，Cat對象就可以直接調用Animal的方法以及屬性了.

function Animal(name){      
    this.name = name;      
    this.showName = function(){      
        alert(this.name);      
    }      
}      
    
function Cat(name){    
    Animal.call(this, name);    
}      
    
var cat = new Cat("Black Cat");     
cat.showName();  

四、多重繼承

function Class10()  
{  
    this.showSub = function(a,b)  
    {  
        alert(a-b);  
    }  
}  
  
function Class11()  
{  
    this.showAdd = function(a,b)  
    {  
        alert(a+b);  
    }  
}  
  
function Class2()  
{  
    Class10.call(this);  
    Class11.call(this);  
}