ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript学習メモ(10) jsオブジェクト継承_基礎知識

JavaScript学習メモ(10) jsオブジェクト継承_基礎知識

WBOY
WBOYオリジナル
2016-05-16 17:52:23780ブラウズ

1. プロトタイプチェーン
//単独で使用されることはほとんどありません

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

コードを表示
//属性プロパティとメソッド getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass を定義します。 prototype.getSuperValue = function() {
return this.property;
}

// 属性 subproperty と後で追加されるメソッド getSubValue を持つ SubClass クラスを定義します。
function SubClass( ) {
this.subproperty = false;
}

//SubClass クラスは SuperClass クラスを継承します
SubClass.prototype = new SuperClass();メソッド getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}

//SubClass クラスのインスタンスを作成します
var instance = new SubClass();
alert(instance.getSuperValue());


2. プロトタイプとインスタンスの間の関係を決定する
最初の方法は、instanceof 演算子を使用することです。インスタンスとプロトタイプ チェーンをテストします。コンストラクター


コードをコピーします。 コードは次のとおりです。
alert (instanceinstanceofObject); //true、インスタンスは Object のインスタンスですか?
alert(instanceinstanceofSuperClass); //true、インスタンスは SuperClass のインスタンスですか? // true、インスタンスは SubClass のインスタンスですか?


2 番目の方法は、isPrototypeOf() メソッドを使用して、プロトタイプ チェーンに表示されるプロトタイプをテストすることです


コードをコピーします コードは次のとおりです。 alert(Object.prototype.isPrototypeOf(instance)) //true
alert( SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true


3.チェーン継承
メソッドが定義される順序:



コードをコピー コードは次のとおりです: コードの表示
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property; >}

function SubClass() {
this.subproperty = false ;
}

//SubClass は SuperClass を継承します
SubClass.prototype = new SuperClass() / /これを最初に記述し、新しく追加したメソッドとスーパークラスをオーバーライドするメソッドは後で記述する必要があります。そうしないと、オーバーライドされたスーパークラス メソッドは

//新しいメソッド
SubClass を呼び出すことができなくなります。 prototype.getSubValue = function() {
return this.subproperty;
}
//スーパークラスメソッドをオーバーライドします
SubClass.prototype.getSuperValue = function() {
return false; 🎜>}
varinstance = new SubClass();
alert(instance.getSuperValue()); // false、ここでの SubClass のインスタンスは SubClass の getSuperValue() メソッドを呼び出しますが、getSuperValue() はブロックされます。
//SuperClass メソッドを使用すると、SuperClass の getSuperValue() メソッドが呼び出されます


プロトタイプ チェーン継承の欠点: 1) スーパー クラスでプロパティを共有する、2) 共有できないサブクラスの作成時にスーパークラスのコンストラクターにパラメーターを渡します。すべてのプロトタイプ チェーンは単独で使用されることはほとんどありません

4. コンストラクターの借用
//単独で使用されることはほとんどありません

利点: パラメーターをスーパー クラスに渡すことができます。欠点: 関数は再利用できません。すべてのクラスはコンストラクター パターンを使用する必要があります。




コードをコピー
コードは次のとおりです: コードの表示 function SuperClass(name) { this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang") ; / /スーパークラスを継承し、パラメータをスーパークラスに渡します
this.age = 29; //インスタンス属性

var instance = new SubClass(); ; //RuiLiang
alert(instance.age); //29


6. 最も一般的に使用される継承パターン




コードをコピー


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

コードの表示
//スーパークラスの作成
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue"," green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}

////サブクラスの作成
function SubClass(name,age) {
SuperClass.call(this,name); //継承された属性
this.age = age; //独自の属性

SubClass. = new SuperClass(); //継承されたメソッド
SubClass.prototype.sayAge = function() { //SubClass は新しいメソッド
alert(this.age); を追加します。 //
varinstance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black"); //"red,blue , green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30

var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"赤、青、緑"
instance2.sayName() //"RuiLiang"


7. その他の継承パターン
プロトタイプ継承、寄生継承、寄生複合継承
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。