es6 継承と es5 継承の違いは何ですか?

es5 と es6 の継承の違い: ES5 の継承は、プロトタイプまたはコンストラクターのメカニズムを通じて実装されます。最初にサブクラスを作成し、次に親クラスをインスタンス化し、それをサブクラスに追加します。 ES6 は最初に親クラスを作成し、次にスーパー メソッドを呼び出して親クラスにアクセスするサブセットをインスタンス化し、これを変更することで継承を実装します。

#このチュートリアルの動作環境は、Windows 7 システム、ECMAScript 5&&ECMAScript 6 バージョン、Dell G3 コンピューターです。

es6 の継承と es5 の継承の違い

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

• #ES6 の継承の仕組みは全く異なります。要するに、親のインスタンス オブジェクト this です。クラスが最初に作成され (そのため、最初に親クラスの super() メソッドを呼び出す必要があります)、次にサブクラスのコンストラクターを使用してこれを変更します。

• ES5 の継承は、プロトタイプまたはコンストラクター メカニズムを通じて実装されます。

• ES6 は、コンストラクター メソッドを持つ class キーワードを通じてクラスを定義し、クラス間の継承は extends キーワードを通じて実現されます。サブクラスはコンストラクター メソッドでスーパー メソッドを呼び出す必要があります。そうしないと、新しいインスタンスの作成時にエラーが報告されます。サブクラスは独自の this オブジェクトを持たず、親クラスの this オブジェクトを継承して処理するためです。スーパー メソッドが呼び出されない場合、サブクラスは this オブジェクトを取得できません。

super キーワードは、親クラスのインスタンス、つまり親クラスの this オブジェクトを参照していることに注意してください。

注: サブクラス コンストラクターでは、 this キーワードは super を呼び出した後にのみ使用できます。使用しない場合は、エラーが報告されます。

1. es5 での継承:

	function parent(a,b){
	    this a = a;
	    this b = b;
	}
	function child(c){
	    this c = c
	};

サブセットを介して親を継承:

parent.call(child,1,2)

基礎となる call メソッド、継承を見てみましょう。プロセスはプロトタイプ属性を介して行われます

child.prototype = new parent(1,2);

ES5 継承の本質は、最初にサブクラス要素の子のインスタンス オブジェクトを作成し、次に親クラス要素のプロトタイプ オブジェクトに属性を割り当てることであることがわかります。 parent サブクラス要素 child のインスタンスオブジェクトへ継承を実現

2. ES6 での継承

従来の JS ではコンストラクタを作成することでオブジェクトを生成し、定義します。生成されたオブジェクト

function parent(a,b){
    this.a = a;
    this.b = b;
}

を作成し、プロトタイプ

parent.prototype.methods = function(){
    return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;

を通じて対応する必要なメソッドまたは属性を追加します。クラスの概念、つまりクラスは ES6 で導入されました。オブジェクトはキーワード クラスを通じて定義されます。

クラスは、作成したオブジェクトをよりわかりやすくするためのキーワード、言語シュガーです。

コントロールメソッドから渡されたパラメータは、属性コンストラクターを介して受け取ります。この属性、デフォルトはパラメータなしです

class parent{
    curstructor(a,b){
        this.a = a;
        this.b = b;
    }
}

ES6 の継承はクラス間の継承に基づいています。これは、キーワード extends によって実現されます。

スーパー インスタンス化による親クラスの呼び出し

	class parent{
	　　constructor(a,b){
	　　　　this.a = a;
	　　　　this.b = b;
	　　}
	　　parentMethods(){
	　　　　return this.a + this.b
	　　}
	}
	class child extends parent{
	　　constructor(a,b,c){
	　　　　super(a,b);
	　　　　this.c = c;
	　　}
	　　childMethods(){
	　　　　return this.c + ',' + super.parentMethods()
	　　}
	}
	const point = new child(1,2,3);
	alert(point.childMethods());

上記のコードは、ES6 の親子クラス継承の単純なセットです。

ご覧になったことがあると思いますが、明らかな違いは、ES6 では、新しいインスタンス化を作成するのではなく、親コンポーネントをアクティブにするスーパー メソッドであることです。つまり、親のインスタンス オブジェクトです。最初にクラスが作成されるので、呼び出し後、サブクラスのコンストラクター内でこれを変更してプロトタイプ オブジェクトを完成させます。

概要:

ES5 と ES6 の継承の最大の違いは次のとおりです:

• ES5 は最初にサブクラスを作成し、次にインスタンス内で親クラスを変換してサブクラスに追加します。 this

• ES6 は最初に親クラスを作成し、インスタンス化されたサブセット内のスーパー メソッドを呼び出して親クラスにアクセスした後、継承します。これを変更することで実現できます

[推奨学習:

JavaScript ビデオ チュートリアル]

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