JavaScript が継承を実装する方法 (6 つの方法)_JavaScript のヒント

前書き: ほとんどの OO 言語は、インターフェイスの継承と実装の継承という 2 つの継承方法をサポートしています。ただし、ECMAScript ではインターフェイスの継承は実装の継承のみをサポートしており、その実装の継承は主にプロトタイプ チェーンに依存します。

1. プロトタイプチェーン

基本的な考え方: プロトタイプを使用して、ある参照型に別の参照型のプロパティとメソッドを継承させます。

コンストラクター、プロトタイプ、インスタンス間の関係: 各コンストラクターにはプロトタイプ オブジェクトがあり、プロトタイプ オブジェクトにはコンストラクターへのポインターが含まれ、インスタンスにはプロトタイプ オブジェクトへの内部ポインターが含まれます。

プロトタイプチェーン実装の継承例:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

2. コンストラクター

を借用します。

基本的な考え方: サブタイプ コンストラクター内でスーパークラス コンストラクターを呼び出します。このコンストラクターは、call() メソッドと apply() メソッドを使用して、新しく作成されたオブジェクトに対して実行できます。

例:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3. 組み合わせの継承

基本的なアイデア: プロトタイプ チェーンと借用コンストラクターのテクノロジーを組み合わせて、両方の利点を活用する継承モデル。

例:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(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() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4. プロトタイプの継承

基本的な考え方: プロトタイプを利用すると、カスタム タイプを作成しなくても、既存のオブジェクトに基づいて新しいオブジェクトを作成できます。

プロトタイプ継承の概念は、次の関数で説明できます:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

例:

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

ECMAScript5 は、新しい Object.create() メソッドを通じてプロトタイプの継承を標準化します。このメソッドは、新しいオブジェクトのプロトタイプとして使用されるオブジェクトと、追加のプロパティを定義するための新しいオブジェクトとして使用されるオブジェクトの 2 つのパラメーターを受け取ります。

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5. 寄生継承

基本的な考え方: 継承プロセスをカプセル化するためにのみ使用される関数を作成します。この関数は内部的に何らかの方法でオブジェクトを強化し、最終的には実際にすべての作業を行ったかのようにオブジェクトを返します。

例:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6. 寄生結合継承

基本的な考え方: 関数を借用することでプロパティを継承し、プロトタイプ チェーンのハイブリッド形式を通じてメソッドを継承します

基本モデルは次のとおりです:

function inheritProperty(subType, superType) {
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}

例:

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);
this.age = age;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

上記の内容では、JavaScript で継承を実装する 6 つの方法を紹介しています。お役に立てば幸いです。