Javascript繼承機制的實現

標籤：src   它的   name   color   引用   div   覆蓋   display   原型   

學完了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繼承機制的總結，不足之處望各位指正批評。

 

Javascript繼承機制的實現