JavaScriptのクラスの継承(ES 6、class、extens、super)

Classは、extends によって、ES 5よりも継承されているプロトタイプチェーンを修正することによって、継承を実現することができ、非常に明確で便利である.以下のとおりです

class Test{}

class ColorTest extends Test{}

       上のコードは、extendsキーを通じてTestクラスのすべての属性と方法を継承するColorTestクラスを定義しています.しかし、コードが配置されていないので、これらの2つのクラスは完全に同じで、1つのTestクラスを複製したのと同じです.次に、ColorTest内部にコードを追加します.

class ColorTest extends Test {
  constructor(x, y, color) {
    super(x, y); //      constructor(x, y)
    this.color = color;
  }

  toString() {
    //      toString()
    return this.color +" "+ super.toString();
  }}

       上記のコードの中で、constructor方法とtoString方法の両方にsuper ， ， this が現れています.
        ES6 ， super        サブクラスは、constructor方法でsuper を呼び出す必要があります.そうでないと、新しいインスタンスを作成するときにエラーが発生します.これは、サブクラスの自分のthisオブジェクトは、父親の構造関数を介して、最初に作成し、父親と同じインスタンスの属性と方法を得て、その後、それを加工し、サブクラスの自分のインスタンスの属性と方法を加える必要があります.superメソッドを起動しないと、サブクラスはthisオブジェクトを得られません.

class Test { /* ... */ }

class ColorTest  extends Test {
  constructor() {
  }}

let res = new ColorTest(); // ReferenceError

       上のコードでは、ColorTestは親タイプTestを継承していますが、その構造関数はsuper方法を起動していませんので、新しいインスタンスタイムズが間違っています.
       注意すべき点は、サブクラスのコンストラクタにおいて、 がsuperを起動した後、 は、thisキーワードを使用することができ、そうでなければエラーが発生することである.これは、サブクラスのインスタンスの構築は、親クラスのインスタンス加工に基づいており、super方法のみが親クラスのインスタンスに戻ることができるからである.

class Test {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }}

class ColorTest  extends Test{
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; //   
  }}

       上のコードの中で、サブクラスのconstructorメソッドはsuperを呼び出す前に、thisキーワードを使っていましたが、結果としてエラーが発生しました.superメソッドの後に置くと正しい結果になります.