js中call方法和apply方法解析

今天小熙帶你們來詳細的瞭解一下js中的call和apply方法。這兩個方法基本上是一個意思，區別在於 call 的第二個參數能夠是任意類型，而apply的第二個參數必須是數組，也能夠是arguments，還有 callee，caller..

一、方法定義

call方法: 
語法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定義：調用一個對象的一個方法，以另外一個對象替換當前對象。 
說明： 
call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。 
若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。 

apply方法： 
語法：apply([thisObj[,argArray]]) 
定義：應用某一對象的一個方法，用另外一個對象替換當前對象。 
說明： 
若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。 
若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數。

二、經常使用實例

Java代碼  

1. function Animal(){    
2.     this.name = "Animal";    
3.     this.showName = function(){    
4.         alert(this.name);    
5.     }    
6. }    
7.   
8. function Cat(){    
9.     this.name = "Cat";    
10. }    
11.    
12. var animal = new Animal();    
13. var cat = new Cat();  
14.  
15. animal.showName();//彈出Animal

17. animal.showName.call(cat,""); //自動執行彈出Cat

18.     
19. //經過call或apply方法，將本來屬於Animal對象的showName()方法交給對象cat來使用了。    
20. //輸入結果爲"Cat"    
21. animal.showName.call(cat,",");    
22. //animal.showName.apply(cat,[]);  

/這個是說 cat 已經繼承了animal的方法了，雖然cat木有showName這個方法，可是經過call，已經把參數都傳給了cat，cat直接調用繼承到的showName()方法便可  

 

c、實現繼承

1. function Animal(name){      
2.     this.name = name;      
3.     this.showName = function(){      
4.         alert(this.name);      
5.     }      
6. }      
7.     
8. function Cat(name){    
9.     Animal.call(this, name);    
10. }      
11.     
12. var cat = new Cat("Black Cat");     
13. cat.showName();  //彈出Black Cat

執行過程：

首先執行var cat = new Cat("Black Cat");進入function Cat(name){  
     Animal.call(this, name);  
}
這時候的this爲Cat{}對象，並不是Animal，再接執行function Animal(name){    
     this.name = name;    
     this.showName = function(){    
         alert(this.name);    
     }    
}
此時的this對象綁定爲Cat{},所以是Cat對象得到了兩個屬性爲：Cat{name:"Black Cat",showName:function(){    
         alert(this.name);    
     }}，回到var cat=Cat{name:"Black Cat",showName:function(){    
         alert(this.name);    
     }}

最後纔是cat.showName();

 

d、多重繼承

1. function Class10()  
2. {  
3.     this.showSub = function(a,b)  
4.     {  
5.         alert(a-b);  
6.     }  
7. }  
8.   
9. function Class11()  
10. {  
11.     this.showAdd = function(a,b)  
12.     {  
13.         alert(a+b);  
14.     }  
15. }  
16.   
17. function Class2()  
18. {  
19.     Class10.call(this);  
20.     Class11.call(this);  
21. }  
22. var aa = new Class2();  aa.showSub(7,2)//彈出5

 很簡單，使用兩個 call 就實現多重繼承了。

聽完小熙的講解和貼碼，你們是否是對call和apply方法有所瞭解了呢~~若有不懂，歡迎你們留言哦