JSでの継承方法——組合せ継承の紹介と実践
3116 ワード
コンビネーション継承は、元のチェーン継承と構造関数継承の合体であり、両者のそれぞれの点を汲み取りながら、それぞれの弱点を補完し、非常に広く応用されているjavascript継承モードである.以下では,それぞれ原鎖継承,構造関数継承から紹介し,最後に両者の結合である組合せ継承を紹介する.
一、プロトタイプチェーン:プロトタイプを利用して一つの参照タイプに別の参照タイプの属性と方法を継承させる
各コンストラクション関数にはプロトタイプオブジェクトがあり、プロトタイプオブジェクトにはコンストラクション関数を指すポインタが含まれ、インスタンスにはプロトタイプオブジェクトを指す内部ポインタが含まれます.
元のチェーンを実現するための基本モード:
最後の結果:intanceはSubTypeのプロトタイプを指し,SubTypeのプロトタイプはSuperTypeのプロトタイプを指し,SuperTypeはObjectを継承した
すべての関数のデフォルトのプロトタイプはObjectのインスタンスです
質問:参照タイプ値の問題が発生します
たとえば、サブクラスのインスタンスを作成し、サブクラスのインスタンスのプロパティを変更すると、他のサブクラスを作成するときに影響を受けます.コードは次のとおりです.
以上の結果は、他のインスタンスのプロパティ値に影響を及ぼすことを示しています.
二、借用構造関数:サブタイプ構造関数の内部でスーパータイプ構造関数を呼び出す
この方法を使用すると、次のようにサブクラスコンストラクタでスーパータイプコンストラクタにパラメータを渡すことができます.
質問:多重化が不便
三、組合せ式継承:プロトタイプチェーンを用いてプロトタイプ属性と方法の継承を実現し、構造関数を借りてインスタンス属性の継承を実現する
サンプルコード:
一、プロトタイプチェーン:プロトタイプを利用して一つの参照タイプに別の参照タイプの属性と方法を継承させる
各コンストラクション関数にはプロトタイプオブジェクトがあり、プロトタイプオブジェクトにはコンストラクション関数を指すポインタが含まれ、インスタンスにはプロトタイプオブジェクトを指す内部ポインタが含まれます.
元のチェーンを実現するための基本モード:
function SuperType(){
this.property =true;
}
SuperType.prototype.getSuperValue = function(){
returnthis.property;
}
function Subtype){
this.subproperty =false;
}
SubType.prototype = new SuperType(); // SuperType
SubType.prototype.getSubValue = function(){
returnthis.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());
最後の結果:intanceはSubTypeのプロトタイプを指し,SubTypeのプロトタイプはSuperTypeのプロトタイプを指し,SuperTypeはObjectを継承した
すべての関数のデフォルトのプロトタイプはObjectのインスタンスです
質問:参照タイプ値の問題が発生します
たとえば、サブクラスのインスタンスを作成し、サブクラスのインスタンスのプロパティを変更すると、他のサブクラスを作成するときに影響を受けます.コードは次のとおりです.
function SuperType(){
this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors); //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors); //red, blue, green, black
以上の結果は、他のインスタンスのプロパティ値に影響を及ぼすことを示しています.
二、借用構造関数:サブタイプ構造関数の内部でスーパータイプ構造関数を呼び出す
function SuperType(){
this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
SuperType.call(this); // SuperType。 SuperType ,
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors); //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors); //red,blue,green
この方法を使用すると、次のようにサブクラスコンストラクタでスーパータイプコンストラクタにパラメータを渡すことができます.
function SuperType(name){
this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”); // , name
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //Nicholas
alert(instance.age); //29
質問:多重化が不便
三、組合せ式継承:プロトタイプチェーンを用いてプロトタイプ属性と方法の継承を実現し、構造関数を借りてインスタンス属性の継承を実現する
サンプルコード:
function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”,“green”];
}
SuperType.prototype.sayName = function(){ // ,
alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name); // SuperType ,this SubType,
this.age = age; // age
}
SubType.prototype = new SuperType(); // , ( )
SubType.prototype.sayAge = function(){ // SubType
alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors); //red,blue,green,black
instance1.sayName(); //Martin
instance1.sayAge(); //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors); //red,blue,green
instance2.sayName(); //Greg
instance2.sayAge(); //27