JavaScriptの継承とは何ですか

JavaScript では、継承は既存のクラスに基づいて新しいクラスを作成できるメカニズムです。継承によりサブクラスに柔軟性が提供され、親クラスのメソッドと変数を再利用できます。継承のプロセスは一般的なプロセスから特殊なプロセスまであります。 、プロトタイプ チェーンとコンストラクターを使用して継承を実装できます。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript における継承とは

JavaScript の継承は、既存のクラスに基づいて新しいクラスを作成できるメカニズムであり、サブクラスが親クラスのメソッドと変数を再利用できる柔軟性を提供します。相続のプロセスは、一般から特殊へのプロセスです。

IS-A 関係を維持します。

extends キーワードはクラス式またはクラス宣言で使用されます。

extends キーワードを使用すると、組み込みオブジェクトとカスタム クラスのすべてのプロパティと動作を取得できます。

プロトタイプベースのメソッドを使用して継承を実装することもできます。

JavaScript はどのように継承を実装するのでしょうか?

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 ビデオ チュートリアル , ウェブフロントエンド ]

以上がJavaScriptの継承とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。