javascriptで継承を実現する6つの方法
8587 ワード
javascriptにおける相続に関する説明:
多くの対象言語は、2つの継承方式をサポートしています.インターフェースの継承と継承の実現です.インターフェースは継承方法の署名のみを継承し、継承を実現するには実際の方法を継承します.javascriptでは、関数に署名がないので、インターフェースの継承はできません.継承はサポートされています.そして、継承は主にプロトタイプチェーンで実現されます.
まず、公式文書のプロトタイプチェーンについての説明を引用します.その基本的な考え方は、プロトタイプを利用して、他の引用タイプの属性と方法を継承することです.この概念を理解するには、まず構造関数、プロトタイプ、および実例の関係を明らかにする必要があります.各構造関数にはプロトタイプ属性があります.この属性はオブジェクトを指します.プロトタイプオブジェクト(オブジェクトであれば)の中に一つのコンストラクタ属性があります.この属性はコンストラクタを指します.実例には、プロトタイプオブジェクトを指す内部ポインタ`Prottype`が含まれています.はっきり言って、プロトタイプチェーンの構築は、あるタイプのインスタンスを他のコンストラクタのプロトタイプに値付けすることによって達成される.このようなタイプは、超タイプに定義されたすべての属性と方法にアクセスすることができます.各オブジェクトには自分のプロトタイプのオブジェクトがあり、プロトタイプのオブジェクトをモデルとしてモデルのオブジェクトから属性と方法を継承し、プロトタイプのオブジェクトには自分のプロトタイプがあり、中から属性と方法を継承することもできます.
javascriptで継承を実現する6つの方法:
1、プロトタイプチェーン
2、構造関数を借りる
3、組合せ相続(プロトタイプチェーンと借用構造関数を組み合わせる)
4、原型式継承
5、寄生式継承
6、寄生結合式継承(組み合わせで相続と寄生式継承)
1、プロトタイプチェーン
多くの対象言語は、2つの継承方式をサポートしています.インターフェースの継承と継承の実現です.インターフェースは継承方法の署名のみを継承し、継承を実現するには実際の方法を継承します.javascriptでは、関数に署名がないので、インターフェースの継承はできません.継承はサポートされています.そして、継承は主にプロトタイプチェーンで実現されます.
まず、公式文書のプロトタイプチェーンについての説明を引用します.その基本的な考え方は、プロトタイプを利用して、他の引用タイプの属性と方法を継承することです.この概念を理解するには、まず構造関数、プロトタイプ、および実例の関係を明らかにする必要があります.各構造関数にはプロトタイプ属性があります.この属性はオブジェクトを指します.プロトタイプオブジェクト(オブジェクトであれば)の中に一つのコンストラクタ属性があります.この属性はコンストラクタを指します.実例には、プロトタイプオブジェクトを指す内部ポインタ`Prottype`が含まれています.はっきり言って、プロトタイプチェーンの構築は、あるタイプのインスタンスを他のコンストラクタのプロトタイプに値付けすることによって達成される.このようなタイプは、超タイプに定義されたすべての属性と方法にアクセスすることができます.各オブジェクトには自分のプロトタイプのオブジェクトがあり、プロトタイプのオブジェクトをモデルとしてモデルのオブジェクトから属性と方法を継承し、プロトタイプのオブジェクトには自分のプロトタイプがあり、中から属性と方法を継承することもできます.
javascriptで継承を実現する6つの方法:
1、プロトタイプチェーン
2、構造関数を借りる
3、組合せ相続(プロトタイプチェーンと借用構造関数を組み合わせる)
4、原型式継承
5、寄生式継承
6、寄生結合式継承(組み合わせで相続と寄生式継承)
1、プロトタイプチェーン
：
//
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
// ， SuperType SubType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); // true
PS：SubType SuperType， SuperType ， SubType 。 ， 。 `Prototype` SuperType ， SuperType constructor SuperType 。 ：instance SubType ，SubType SuperType ，SuperType Object （ Object ， ， Object.prototype）。
：
1、 ， 。 ， ， 。 ： ， 。
2、 ， 。
：
// ； apply() call()
function SuperType(){
//
this.colors = ["red","green","blue"];
}
function SubType(){
// SuperType，
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("purple");
alert(instance1.colors); // "red,green,blue,purple"
var instance2 = new SubType();
alert(instance2.colors); // "red,green,blue"
PS： apply() call() ， SubType SuperType 。 ， SubType SuperType() 。 SubType colors 。
； ， 。 ， ， ， 。
：
// 。 ， 。 ， ， 。
function SuperType(name){
this.name = name;
this.colors = ["red","green","blue"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name,age){
//
SuperType.call(this,name);
this.age = age;
}
//
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("luochen",22);
instance1.colors.push("purple");
alert(instance1.colors); // "red,green,blue,purple"
instance1.sayName();
instance1.sayAge();
var instance2 = new SubType("tom",34);
alert(instance2.colors); // "red,green,blue"
instance2.sayName();
instance2.sayAge();
PS： ， ， javascript 。 ， instanceof isPrototype() 。 ， 。 ， ： ， 。 ：
// ， 。
1、
function object(o){
function F(){}
F.prototype = o;
return new F();
}
PS： object() ， ， ， 。 ，object() 。
2、 Object.create() 。 ： 。 ， object() 。
， 。
var person = {
name: "luochen",
colors: ["red","green","blue"]
};
var anotherPerson1 = Object.create(person,{
name: {
value: "tom"
}
});
var anotherPerson2 = Object.create(person,{
name: {
value: "jerry"
}
});
anotherPerson1.colors.push("purple");
alert(anotherPerson1.name); // "tom"
alert(anotherPerson2.name); // "jerry"
alert(anotherPerson1.colors); // "red,green,blue,purple"
alert(anotherPerson2.colors); // "red,green,bule,purple";
PS： ， 。 ： 。 ：
// ， ，
function createPerson(original){
var clone = Object.create(original); // Object.create()
clone.sayGood = function(){ //
alert("hello world！！！");
};
return clone; //
}
PS： ， 。 。 ：
// ， 。 ， ，
function SuperType(name){
this.name = name;
this.colors = ["red","green","blue"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
//
var anotherPrototype = Object.create(SuperType.prototype);
// constructor
anotherPrototype.constructor = SubType;
//
SubType.prototype = anotherPrototype;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("luochen",22);
instance1.colors.push("purple");
alert(instance1.colors); // "red,green,blue,purple"
instance1.sayName();
instance1.sayAge();
var instance2 = new SubType("tom",34);
alert(instance2.colors); // "red,green,blue"
instance2.sayName();
instance2.sayAge();
PS： SuperType ， SubType.prototype ， 。 ， ； instance isPrototype() 。