JavaScriptプロトタイプ継承(一)

最近HTML 5に触れましたが、もちろんHTML 5に触れたことのある人は知っていますが、html 5も新しいラベルを提供しているにすぎません.実現の核心を整えるのはjavascriptのところです.夏休みにはext 4のweb desktopもやったし、javascriptのものも多い.Javascriptの場合、以前はdocumentしかできませんでした.getElementById()とalert()は、今から徐々に深く理解し始めました.もし本文に何か間違っているところがあれば、指摘してください.Javasriptについては,オブジェクトベースであるためクラスの概念がないため,継承を実現するにはjavascriptのプロトタイプメカニズムprototypeを用いて実現するしかない.(実はここは間違っていて、@記憶の森のヒントに感謝して、applyとcallで実現することもできます)javascriptはクラスを実現する専門的なメカニズムがないので、ここではその関数を借りてクラスをネストできるメカニズムで実現クラスをシミュレートするしかありません.Javascriptでは、1つの関数に変数を含めることも、他の関数を含めることもできます.そうすれば、変数をクラスの属性として、内部の関数をメンバーメソッドとして使用することができます.では、外層の関数は、クラスと見なすことができます.1、まず動物類を書きましょう.実は彼は関数です.ただ、私たちはそれをこの類の構造関数と見ることができます.

function Animal(){  
	console.log('Call the constuctor.');  
} 

2、そしてnewキーワードを使ってmyClassクラスのインスタンスを作成することができます.

var cat = new Animal(); 

       
これにより、インスタンスobjを作成し、実行して、関連するデバッグツールを使用してCall the constructorのデバッグ情報を見ることができます.クラスの作成に成功したことを証明します.3、それでは、次に、構造関数にパラメータを加えることもできます.例えば、

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

       
これにより、インスタンスを作成し、クラスのプロパティにアクセスできます.

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

これで、インスタンスcatのプロパティnameにアクセスできます.4、動物が跳ぶと食べられることはよく知られていますが、どうやって方法を加えますか.次の方法の1つを見てください:直接構造関数の中で方法を宣言します

function Animal(name){  
    this.name = name;  
    this.jump = function(){  
        alert (this.name + " is jumping...");  
    };  
 
    this.eat = function(){  
        alert (this.name + " is eatting...");  
    };  
}  
 
var cat = new Animal("Kate");  
 
alert(cat.name);  
cat.jump();  
cat.eat(); 

       
方法2:prototypeを利用してクラスに方法を追加する

function Animal(name){  
    this.name = name;  
}  
 
Animal.prototype = {  
          
    type : 'cat',  
 
    jump : function(){  
        alert (this.name + " is jumping...");  
    },  
 
    eat : function(){  
        alert (this.name + " is eatting...");              
    }  
 
}  
 
var cat = new Animal("Kate");  
 
alert(cat.name);  
alert(cat.type);  
cat.jump();  
cat.eat(); 

       
同様に、typeなどの新しい属性を同じ方法でクラスに追加することもできます.5、上述したのはjavasciptで、どのようにクラスを作成するか、どのようにクラスに属性と方法を追加するか、次に、どのようにクラスの継承を実現するかについて話します.継承を実現するにはprototypeでクラスの継承を実現できます.まず、Dogクラスを宣言し(まだ分からない場合は、上記の関連内容を見直してください)、Animalクラスを継承させます.

function Dog(){};  
Dog.prototype = new Animal("Henry");

       
新しい犬dogをインスタンス化して、その方法を呼び出してみて、成功したかどうかを見てみましょう.

function Dog(){};  
Dog.prototype = new Animal("Henry");  
 
var dog = new Dog();  
dog.jump();  
dog.eat(); 

       
明らかに、コードが間違っていなければ、「Henry is jumping...」というヒントが見えるはずです.“Henry is eatting...”. 6、クラスの継承が実現した以上、必ず別の問題を考えなければならない.それは多態の問題である.マルチステートとは、同じ操作または関数、プロシージャが複数のタイプのオブジェクトに作用し、異なる結果を得ることができることを意味します.異なるオブジェクトでは、同じメッセージを受信して異なる結果を生成することができ、この現象をマルチステートと呼ぶ.継承により、子クラスは親クラスのメソッドを継承しますが、マルチステートを実現するには、子クラスのメソッドを書き換える必要があります.より明確に表現するために、Pigクラスを作成し、Animalクラスを継承します.どうやって作成するかは言わない.作成したコードは今のようになるはずです.

function Dog(){};  
Dog.prototype = new Animal("Henry");  
 
function Pig(){};  
Pig.prototype = new Animal("Coco");  
 
var dog = new Dog();  
dog.jump();  
dog.eat();  
 
var pig = new Pig();  
 
pig.jump();  
pig.eat(); 

       
実行後、Animalクラスを継承したため、結果は必ず「XX is jumping...」となり、“XX is eatting...”では、私たちが実現しなければならないのは、方法の書き換えです.方法の書き換えを実現するには、次の方法があります.

function Dog(){};//  dog    
Dog.prototype = new Animal("Henry");  
//  dog     
Dog.prototype.jump = function(){  
    alert("Hi, this is " + this.name + ", I'm jumping...")  
};  
Dog.prototype.eat = function(){  
    alert("Henry is eatting a bone now.");      
};  
 
function Pig(){};//  pig    
Pig.prototype = new Animal("Coco");  
//  pig     
Pig.prototype.jump = function(){  
    alert("I'm sorry. " + this.name + " can not jump.");  
};  
Pig.prototype.eat = function(){  
    alert("Hi, I'm " + this.name + ", I'm eatting something delicious.");  
}  
 
var dog = new Dog();  
dog.jump();  
dog.eat();  
 
var pig = new Pig();  
 
pig.jump();  
pig.eat(); 

       
実行してみると、メソッドの書き換えが実現したのではないでしょうか.6、では、もし私がdogをインスタンス化した後、このdogに属性と方法を単独で追加したいなら、どうすればいいのでしょうか.下を見る

var dog = new Dog();  
//         
dog.type = "Doberman Pinscher";  
dog.shout = function(){  
    alert("I'm a " + this.type + ".");  
}  
dog.jump();  
dog.eat();  
//        
dog.shout(); 

       
7、はい、この文章はここまでです.初心者はクラスの作成と継承について一定の理解があると信じています.原文:http://www.cnblogs.com/chenmj/archive/2011/08/28/2156294.html