JavaScript プロトタイプ継承の概要_JavaScript スキル

夏休みには、ext4 Web デスクトップやその他の JavaScript にも取り組みました。 JavaScriptについては、以前はdocument.getElementById()とalert()しか知りませんでしたが、より深く理解できるようになりました。この記事に間違いがある場合は、ご指摘ください。
JavaScript に関しては、オブジェクトに基づいているため、クラスの概念がありません。したがって、継承を実装したい場合は、JavaScript のプロトタイプ機構を使用するしかありません。 (実際、これは間違いです。@Memory Forest のヒントのおかげで、apply と call を使用してそれを実現することもできます)
JavaScript にはクラスを実装するための特別なメカニズムがないため、ネストできるのは次の助けを借りてのみです。実装クラスをシミュレートするメカニズム。 JavaScript では、関数に変数または他の関数を含めることができます。この場合、変数をクラスの属性として使用し、内部関数をメンバー メソッドとして使用できます。すると、外側の関数はクラスとみなすことができます。
1. まず、動物クラスを作成します。実際には関数ですが、このクラスのコンストラクターとして考えることができます。

コードをコピーします。 🎜> コードは次のとおりです。

function Animal(){
console.log('コンストラクターを呼び出します。')
}

2. 次に、new キーワードを使用して myClass クラスのインスタンスを作成します。
var cat = new Animal();
このようにして、インスタンス obj を作成しました。デバッグ ツールでは、コンストラクターを呼び出してデバッグ情報を確認できます。これは、クラスが正常に作成されたことを証明します。
3. 次に、次のようなパラメーターをコンストラクターに追加することもできます。

コードをコピー コードは次のとおりです。以下のように:

function Animal(name){
this.name = name;
}

このようにして、インスタンスを作成してアクセスできます。クラス 属性は

コードをコピーします コードは次のとおりです。

function myClass(name ){
this.name = name;
}
var cat = new myClass("Kate");


この中でこの方法で、インスタンス cat の属性名にアクセスできます。

4. 動物がジャンプして食べることができることは誰もが知っていますが、それにメソッドを追加するにはどうすればよいでしょうか?以下を参照してください
方法 1: コンストラクターでメソッドを直接宣言します

コードをコピーします コードは次のとおりです:

function Animal(name){

this.name = name; this.jump = function(){
alert (this.name " がジャンプしています..."); };
this.eat = function(){
alert (this.name " が食べています...");
}
var cat = new Animal(" ");
alert(cat.name);
cat.jump();
cat.eat();


方法 2: プロトタイプを使用して、 class

コードをコピー

コードは次のとおりです。 function Animal(name){ this.name = 名前;

}

Animal.prototype = {
type : 'cat',
jump : function(){
alert (this.name " はジャンプしています.. .");
},
eat : function(){
alert (this.name " が食べています...");
}
}
var cat = new動物("ケイト");
alert(cat.type);
cat.eat(); >
同様に、同じメソッドを使用して、type などの新しい属性をクラスに追加することもできます。
5. 上で説明したのは、JavaScript でクラスを作成する方法とその方法です。クラスに属性とメソッドを追加します。 次に、クラスの継承を実装する方法について説明します。
継承を実現するには、プロトタイプを通じてクラス継承を実装できます。まず、Dog クラスを宣言し (それでも理解できない場合は、上記の関連内容をもう一度読んでください)、Animal クラスを継承させる必要があります。

コードをコピーします


コードは次のとおりです。

function Dog(){}; >Dog.prototype = new Animal("Henry"); 次に、新しい犬をインスタンス化し、そのメソッドを呼び出して成功するかどうかを確認します。

コードをコピー

コードは次のとおりです:

関数 Dog(){};
Dog.prototype = new Animal("Henry");
var 犬 = new Dog(); >dog.eat();


明らかに、コードが正しければ、「ヘンリーはジャンプしています...」、「ヘンリーは食べています...」というプロンプトが表示されるはずです。

6. クラス継承が実装されたので、別の問題が思い浮かぶはずです。それはポリモーフィズムの問題です。
ポリモーフィズムとは、同じ操作、関数、またはプロセスを複数の種類のオブジェクトに適用して、異なる結果を得ることができることを意味します。同じメッセージを受信したときに、オブジェクトが異なれば結果も異なる場合があります。この現象はポリモーフィズムと呼ばれます。
サブクラスは継承により親クラスのメソッドを継承していますが、ポリモーフィズムを実現するにはサブクラスのメソッドを書き換える必要があります。
より明確に表現するために、別の Pig クラスを作成し、Animal クラスを継承します。作成方法は教えません。作成されたコードは次のようになります。

コードをコピーします コードは次のとおりです。

function Dog(){}; >犬。プロトタイプ = new Animal("Henry");

関数 Pig(){};
var 犬 = new Dog(); 🎜>dog.jump();
var pig();
pig.eat(); 🎜>
実行後、Animalクラスを継承しているので、「○○がジャンプしている…」「○○が食事をしている…」という結果になるのは間違いないので、メソッドを書き換えることで実現したいのです。メソッドのオーバーライドは次の方法で実装できます。




コードをコピー

コードは次のとおりです:

function Dog(){};//犬の作成 ClassDog.prototype = new Animal("Henry"); //犬のメソッドをオーバーライドDog.prototype.jump = function(){ alert("こんにちは、" this.name "、ジャンプ中です...") }; Dog.prototype.eat = function(){

alert("ヘンリーは今骨を食べています。"); >};

function Pig(){};//豚のサブクラスを作成します
Pig.prototype = new Animal("Coco");
//豚のメソッドをオーバーライドします
Pig.prototype .jump = function(){
alert("申し訳ありません。" this.name " はジャンプできません。");
Pig.prototype.eat = function(){
alert( 「こんにちは、「 this.name 」です。おいしいものを食べています。」); .eat();
var pig = new Pig();


実行してくださいメソッドを書き換えることは可能ですか？ ?
6. 犬をインスタンス化する場合、この犬に属性とメソッドを個別に追加するにはどうすればよいでしょうか。以下を見てください




コードをコピーします


コードは次のとおりです:


var Dog = new Dog() ;
// 属性とメソッドを追加します
dog.type = "ドーベルマンピンシャー";
dog.shout = function(){

alert("私は " this.type " です。" );
}
dog.jump();
dog.eat();

dog.shout(); 7. さて、この記事はここで書かれています。初心者はクラスの作成と継承についてある程度の理解が必要だと思います。ご質問がございましたら、メッセージを残していただけます。アドバイスありがとうございます。