Javascript繼承機制的詳細介紹

這篇文章主要介紹“Javascript繼承機制的詳細介紹”，在日常操作中，相信很多人在Javascript繼承機制的詳細介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Javascript繼承機制的詳細介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

學完了Javascript類和對象的創建之后，現在總結一下Javascript繼承機制的實現。Javascript并不像Java那樣對繼承機制有嚴格明確的定義，它的實現方式正如它的變量的使用方式那樣也是十分寬松的，你可以設計自己的方法“模仿”繼承機制的實現。有以下幾種方法：

1、對象冒充

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
     //下面這兩句代碼相當于將classA代碼體中的內容搬到這里
     this.newMethod1=classA;
     this.newMethod1(str);
     //注意，這里的寫法
     delete this.newMethod1;
     //新的方法和屬性的定義須在刪除了newMethod之后定義，因為可能覆蓋超類的屬性和方法。
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

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()方法

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
   //利用call方法實現繼承
     classA.call(this,str);
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

call()方法中第一個參數傳遞一個對象，這里的this指的是當前對象，后面的參數（可能有多個）是指傳遞給調用call()方法的類（函數）所需要的參數，classA.call()也是相當于直接將classA代碼塊中的內容直接復制到這里，classB的對象同樣可以直接使用classB中的變量和方法。

3、原型鏈

 <script type="text/javascript">
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(){};
   cB.prototype=new cA();
   cB.prototype.age=23;
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB();
   objB.sayAge();
   objB.sayName();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

這里對類的定義要用prototype關鍵字，定義function時不帶有參數，prototype后面的變量或方法相當于java中被static修飾后的屬性和方法，是屬于所有對象的，這里有個特殊之處：cB.prototype=new cA();該句話相當于將cA對象內容復制給cB,cB還可以追加自己的屬性和方法。

4、混合方法

 <script type="text/javascript">
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(name,age){
     cA.call(this,name);
     this.age=age;
   };
   cB.prototype=new cA();
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB("Alan",27);
   objB.sayName();
   objB.sayAge();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

這里可以將屬性封裝在類體內，而方法利用原型方式定義，個人感覺，這是一個很好的設計方法，利用prototype定義的函數可以為多個對象重用，這里需要注意兩點：cB類體內有cA.call(this,name);同時還要將cB原型賦為cB對象，即：cB.prototype=new cA();cA.call(this,name)同樣相當于將cA類塊內的代碼復制于此，后面一句話又將cA的方法添加給cB,同時cB還可以追加自己的屬性和方法。

到此，關于“Javascript繼承機制的詳細介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！