JS における ES6 継承と ES5 継承の違い

継承

ES5 プロトタイプ継承

継承はプロトタイプ チェーン (コンストラクター + [[prototype]]) を通じて実現されます。 (注: 今後は__proto__を[[prototype]]の形式で記述します)
サブクラスのプロトタイプは、親クラス オブジェクトのインスタンスです。したがって、サブクラスのプロトタイプ オブジェクトには親クラスのプロトタイプ オブジェクトへのポインターが含まれ、親クラスのインスタンス属性はサブクラス プロトタイプの属性になります。

// 親クラス: function SuperType; サブクラス: function SubType;
SubType.prototype = new SuperType(); // SubType は SuperType を継承します

// プロトタイプチェーンに関する前のセクションで述べた知識ポイントによれば、インスタンス化されたオブジェクトの__proto__はコンストラクタのプロトタイプに等しい
SubType.prototype.__proto__ === SuperType.prototype // true

上記の継承関係は以下のとおりです。

内部実装メカニズムの観点から見ると、ES5 の継承は実際には最初に this 上にサブクラスのインスタンス オブジェクトを作成し、次にこれに親クラスのメソッドを追加することです。同様の使用法: Father.apply(this)

ES6 クラス継承

継承はクラスの extends + super を通じて実現されます。
サブクラスには独自の this オブジェクトがないため、コンストラクターの super を通じて親クラスの this オブジェクトを継承し、この this オブジェクトにメソッドとプロパティを追加する必要があります。
コンストラクター内の super キーワードは親クラスのコンストラクターを表し、親クラスの新しい this オブジェクトを作成するために使用されます。
内部実装の仕組みから見ると、ES6 の継承の仕組みは完全に異なります。本質的には、まず親クラス this のインスタンス オブジェクトを作成します。そのためには、事前に super メソッドを呼び出し、次にサブクラスのコンストラクターを使用して this ポインターを変更する必要があります。

スーパー使用法

super は関数としてもオブジェクトとしても使用できます。
関数として使用する場合、サブクラスのコンストラクターでのみ使用できます。これは親クラスのコンストラクターを表しますが、super の this はサブクラスのインスタンスを参照するため、サブクラスでは super() は Father.prototype.constructor.call(this) を意味します。
オブジェクトとして使用される場合、superは親クラスのプロトタイプオブジェクト、つまりFather.prototypeを表します。

両者の違い

A: まったく同じではありません。いくつかの主な違いがあります。

1. 文章が違います。クラスの継承は、extends キーワード、super 関数、super メソッドを通じて実現されます。 （継承を実装するために super を使用する方法については詳しく説明しません）
2. クラス内で定義されたメソッドは列挙できませんが、ES5 は異なります。
3. クラスには変数の昇格がありません。これはES5とはまったく異なります。
4. クラスはインスタンスのプロトタイプと同等であり、クラスで定義されたすべてのメソッドはインスタンスに継承されます。メソッドの前に static キーワードを追加すると、メソッドはインスタンスによって継承されず、クラスを通じて直接呼び出され、静的メソッドになります。
5. 内部実装メカニズムが異なります。

ES5 プロトタイプ継承の内部実装

ES5 での継承は、基本的に、最初にサブクラス this のインスタンス オブジェクトを作成し、次に親クラスのメソッドをサブクラス (this) --- Father.apply(this) に追加します。

ES6 クラス継承の内部実装

ES6 の継承メカニズムは完全に異なります。本質的には、最初に親クラスのインスタンス オブジェクト this を作成し、親クラスのプロパティとメソッドを this に配置し (super 関数を通じて呼び出された場合)、次に子クラスのコンストラクターを使用して this を変更します。

実装メカニズムが異なるため、これら 2 種類の継承では、ネイティブ コンストラクターを継承するときにいくつかの違いがあります。

es5 の記述ではネイティブ コンストラクター (Array、Number など) を継承できません。
es5 の継承では、まずサブクラスのインスタンス オブジェクト this を作成し、次に親クラスのプロトタイプのプロパティとメソッドをサブクラスに書き換えます。親クラスの内部プロパティにアクセスできないため、es5 の継承メソッドはネイティブ コンストラクターを継承できません。
es6 では、コンストラクターの継承によってサブクラスを生成できます。 es6 は最初に親クラスのインスタンス オブジェクト this を作成し、次にサブクラスのコンストラクターでそれを変更するため、サブクラスは親クラスのすべてのプロパティとメソッドを継承できます。したがって、クラスはネイティブ コンストラクターのサブクラスを継承してカスタマイズできます。 Extends はクラスの継承だけでなく、ネイティブ コンストラクターの継承にも使用できるため、ネイティブ データ構造に基づいてカスタム データ構造を構築できます。

拡張機能

内部実装メカニズムの説明については、「Ruan Yifeng の es6 ドキュメント - クラス継承」の関連セクションを参照してください。

JavaにおけるES6継承とES5継承の違いについての記事はこれで終わりです。ES6継承とES5継承の違いについてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。