學完了Javascript類和對象的創建之後,現在總結一下Javascript繼承機制的實現。Javascript並不像Java那樣對繼承機制有嚴格明確的定義,它的實現方式正如它的變數的使用方式那樣也是十分寬鬆的,你可以設計自己的方法“模仿”繼承機制的實現。有以下幾種方法: 1、對象冒充 1 <sc ...
學完了Javascript類和對象的創建之後,現在總結一下Javascript繼承機制的實現。Javascript並不像Java那樣對繼承機制有嚴格明確的定義,它的實現方式正如它的變數的使用方式那樣也是十分寬鬆的,你可以設計自己的方法“模仿”繼承機制的實現。有以下幾種方法:
1、對象冒充
1 <script type="text/javascript"> 2 function classA(str){ 3 this.str=str; 4 this.printstr=function(){ 5 document.write(this.str); 6 document.write("<br>"); 7 } 8 this.getstr=function(){ 9 return this.str; 10 } 11 } 12 function classB(name,str){ 13 //下麵這兩句代碼相當於將classA代碼體中的內容搬到這裡 14 this.newMethod1=classA; 15 this.newMethod1(str); 16 //註意,這裡的寫法 17 delete this.newMethod1; 18 //新的方法和屬性的定義須在刪除了newMethod之後定義,因為可能覆蓋超類的屬性和方法。 19 this.name=name; 20 this.sayName=function(){ 21 document.write(this.name); 22 document.write("<br>"); 23 } 24 25 } 26 var a=new classB("Amy","helloworld"); 27 a.printstr(); 28 alert(a.getstr()); 29 a.sayName(); 30 </script>View Code
function定義的代碼塊就相當於一個類,你可以用而且它有this關鍵字,你可以用this為它添加屬性和方法,上述代碼中有以下兩句:
this.newMethod1=classA;
this.newMethod1(str);
classB中定義了newMethod1變數,它是一個引用,指向了classA,並且還調用了classA,這兩句代碼的作用等同於直接將classA代碼塊中的內容直接複製到這裡,這樣創建的classB對像當然具有classA的屬性和方法了。對象冒充還可以實現多繼承,如下:
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
不過,classY會覆蓋classX中同名的屬性和方法,如果設計沒問題的話,classz也不應該繼承具有相同屬性和方法的不同類。
2、利用call()方法
1 <script type="text/javascript"> 2 function classA(str){ 3 this.str=str; 4 this.printstr=function(){ 5 document.write(this.str); 6 document.write("<br>"); 7 } 8 this.getstr=function(){ 9 return this.str; 10 } 11 } 12 function classB(name,str){ 13 //利用call方法實現繼承 14 classA.call(this,str); 15 this.name=name; 16 this.sayName=function(){ 17 document.write(this.name); 18 document.write("<br>"); 19 } 20 21 } 22 var a=new classB("Amy","helloworld"); 23 a.printstr(); 24 alert(a.getstr()); 25 a.sayName(); 26 </script>View Code
call()方法中第一個參數傳遞一個對象,這裡的this指的是當前對象,後面的參數(可能有多個)是指傳遞給調用call()方法的類(函數)所需要的參數,classA.call()也是相當於直接將classA代碼塊中的內容直接複製到這裡,classB的對象同樣可以直接使用classB中的變數和方法。
3、原型鏈
1 <script type="text/javascript"> 2 function cA(){}; 3 cA.prototype.name="John"; 4 cA.prototype.sayName=function(){ 5 document.write(this.name); 6 document.write("<br>"); 7 } 8 function cB(){}; 9 cB.prototype=new cA(); 10 cB.prototype.age=23; 11 cB.prototype.sayAge=function(){ 12 document.write(this.age); 13 document.write("<br>"); 14 } 15 var objB=new cB(); 16 objB.sayAge(); 17 objB.sayName(); 18 document.write("is objB the instance of cA "+(objB instanceof cA)); 19 document.write("<br>"); 20 document.write("is objB the instance of cB "+(objB instanceof cB)); 21 document.write("<br>"); 22 </script>View Code
這裡對類的定義要用prototype關鍵字,定義function時不帶有參數,prototype後面的變數或方法相當於java中被static修飾後的屬性和方法,是屬於所有對象的,這裡有個特殊之處:cB.prototype=new cA();該句話相當於將cA對象內容複製給cB,cB還可以追加自己的屬性和方法。
4、混合方法
1 <script type="text/javascript"> 2 function cA(name){ 3 this.name=name; 4 }; 5 cA.prototype.sayName=function(){ 6 document.write(this.name); 7 document.write("<br>"); 8 } 9 function cB(name,age){ 10 cA.call(this,name); 11 this.age=age; 12 }; 13 cB.prototype=new cA(); 14 cB.prototype.sayAge=function(){ 15 document.write(this.age); 16 document.write("<br>"); 17 } 18 var objB=new cB("Alan",27); 19 objB.sayName(); 20 objB.sayAge(); 21 document.write("is objB the instance of cA "+(objB instanceof cA)); 22 document.write("<br>"); 23 document.write("is objB the instance of cB "+(objB instanceof cB)); 24 document.write("<br>"); 25 </script>View Code
這裡可以將屬性封裝在類體內,而方法利用原型方式定義,個人感覺,這是一個很好的設計方法,利用prototype定義的函數可以為多個對象重用,這裡需要註意兩點:cB類體內有cA.call(this,name);同時還要將cB原型賦為cB對象,即:cB.prototype=new cA();cA.call(this,name)同樣相當於將cA類塊內的代碼複製於此,後面一句話又將cA的方法添加給cB,同時cB還可以追加自己的屬性和方法。
以上是本次對Javascript繼承機制的總結,不足之處望各位指正批評。