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>

関数によって定義されたコードブロックはクラスに相当し、これを使用でき、このキーワードがあり、これを使用してプロパティとメソッドを追加できます。上記のコードには次の 2 つの文があります:

this.newMethod1=classA;

this.newMethod1(str);

newMethod1 変数は classB で定義されており、classA と classA を指します。これらの 2 行のコードの効果は、ここで 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() メソッドの最初のパラメータは現在のオブジェクトを指し、次のパラメータ (複数の場合があります) を指します。 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>

ここでのプロトタイプキーワードは、パラメータなしで定義されます。 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>

ここでは、クラス本体に属性をカプセル化でき、プロトタイプを使用してメソッドを定義できます。オブジェクトを再利用するには、cB クラス本体に cA.call(this,name) があること、同時に cB プロトタイプを cB オブジェクトに割り当てる必要があること、という 2 つの点に注意する必要があります。 cB.prototype=new cA(); cA.call(this, name) は、cA クラス ブロックのコードをコピーすることと同じであり、同時に cB に cA のメソッドを追加します。独自の属性とメソッドを追加することもできます。

上記は私があなたのためにまとめたものです。

関連記事:

AjaxによるServlet3.0とJSインタラクション例詳細解説

ネイティブJSカプセル化フェードイン・フェードアウト効果機能の手順詳細解説

p5。

jsキーボードインタラクション機能まとめ

以上がJavascript 継承メカニズム (詳細な回答、グラフィックチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。