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;}//継承された SuperTypeSubType.prototype = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}varinstance = new SubType();console.log(instance.getSuperValue());//true

2. コンストラクターを借用する

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

例：

function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//SuperType を継承}varinstance1 = new SubType(); .colors.push("black");console.log(instance1.colors);//"red","blue","green","black"varinstance2 = new SubType();console.log(instance2 .色);//「赤」、「青」、「緑」

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);}varinstance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. Colors);//"red","blue","green","black"instance1.sayName();//"EvanChen"instance1.sayAge();//18varinstance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"赤"、"青"、"緑"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( "ロブ");var YetAnotherperson = object(person);yetAnotherperson.name = "リンダ";yetAnotherperson.friends.push("バービー");console.log(person.friends);//"シェルビー","コート" 、「ヴァン」、「ロブ」、「バービー」

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

var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherperson = Object.create(person);anotherperson.name = "Greg";anotherperson.friends. Push("ロブ");var YetAnotherperson = Object.create(person);yetAnotherperson.name = "リンダ";yetAnotherperson.friends.push("バービー");console.log(person.friends);//"シェルビー" 、「コート」、「ヴァン」、「ロブ」、「バービー」

5. 寄生継承

基本的な考え方: 継承プロセスを単純にカプセル化し、内部で何らかの方法でオブジェクトを拡張し、実際にすべての作業を行ったかのようにオブジェクトを返す関数を作成します。

例：

function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",friends:["Shelby ","コート","ヴァン"];};var anotherperson = createAnother(person);anotherperson.sayHi();///"こんにちは"

6. 寄生的な組み合わせ継承

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

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

function継承Property(subType, superType) {varprototype = 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);}