Javascriptの継承機構のコード例を詳しく解説

JavaScriptの継承は、多くの書籍で多くのタイプと実装方法に注意深く分類されています。一般に、オブジェクト偽装メソッドとプロトタイプメソッドの2つのタイプがあります。これら 2 つの方法にはそれぞれ長所と短所があります。最初にそれらを列挙し、次に、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 によって定義されたコード ブロックはクラスと同等であり、これを使用でき、このキーワードがあり、これを使用してプロパティとメソッドを追加できます。上記のコードには次の 2 つの文があります: newMethod1 変数は

this.newMethod1=classA;
 this.newMethod1(str);

classB で定義されており、classA を指し、また classA を呼び出す

reference

です。これらの 2 つのコード文の効果は、この時点で、この方法で作成された classB オブジェクトは、当然、classA の属性とメソッドを持ちます。オブジェクトの偽装では、次のように多重継承を実装することもできます:

function ClassZ() {
 this.newMethod = ClassX;
 this.newMethod();
 delete this.newMethod;

this.newMethod = ClassY;
 this.newMethod();
 delete this.newMethod;
}

ただし、classY は、classX 内の同じ名前のプロパティとメソッドをオーバーライドします。設計に問題がない場合、classz は、同じプロパティを持つ異なるクラスを継承すべきではありません。方法。 2. c

all

() メソッド

 <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() メソッドを使用して、最初のパラメーターとしてオブジェクトを渡します。これは、現在のオブジェクトを指し、次のパラメーター (複数の場合があります) を指します。 call() メソッドのクラス (function) を呼び出すために必要なパラメーターに渡されます。 classA.call() は、ここで classA のコード ブロックの内容を直接コピーすることと同等であり、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>

プロトタイプ キーワードは、関数を定義するときに使用されます。プロトタイプの後の変数またはメソッドは、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>

ここでは、クラス本体に属性をカプセル化でき、プロトタイプを使用してメソッドが定義されており、プロトタイプを使用して定義された関数を複数のオブジェクトで再利用できる、これは個人的には優れた設計方法だと感じます。ここで 2 つの点に注意する必要があります: cB クラス本体に cA.call(this,name) があり、同時に cB プロトタイプを cB オブジェクトに割り当てる必要があります: cB.prototype=new cA (); cA.call(this,name) も同様です ここで cA クラス ブロックのコードをコピーし、次の文で cA のメソッドを cB に追加します。同時に、cB は独自の属性とメソッド。

以上がJavascriptの継承機構のコード例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。