ES 6学習-クラスの原理2

1.基本文法
JavaScript言語では、インスタンスオブジェクトを生成する従来の方法は、構造関数によって行われる.

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

ES 6はClass(クラス)の概念を導入して構造関数を実現した.ES 6のクラスは文法飴だけと見なしてもいいです.ほとんどの機能はES 5でできます.新しいクラスの書き方は対象の原型の書き方をはっきりさせ、対象に向けてプログラミングする文法のようにしか見えません.上のコードはES 6のクラスで書き換えます.次のようになります.

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p=new Point(1,2)

1..nstructorの方法は、これが構造関数の書き方です.
2.「クラス」を定義する方法は、前にFunctionというキーワードを追加する必要がなく、直接関数定義を入れてもいいです.
3.方法間にコンマ区切りは不要で、エラーが発生しました.
上のコードは「クラス」を定義しています.中にはコンストラクションの方法があります.これはコンストラクションの書き方です.
Point類は構造方法の他に、toString方法も定義されています.ただし、「クラス」を定義する方法は、前にFunctionというキーワードを追加する必要がなく、直接関数定義を入れてもいいです.また、方法間にはカンマ区切りは不要です.
2.constructorの方法
一つの種類にはconstructorの方法が必要です.明示的な定義がないと、空きのconstructorの方法がデフォルトで追加されます.
constructorメソッドは、カテゴリのデフォルトの方法であり、newコマンドによりオブジェクトインスタンスを生成する場合、自動的に起動します.一つの種類にはconstructorの方法が必要で、明示的な定義がないと、空きのconstructorの方法がデフォルトで追加されます.

class Point {
}

//    
class Point {
  constructor() {}
}

3.クラスのインスタンスオブジェクト
クラスのインスタンスオブジェクトの書き方はES 5と全く同じで、newコマンドを使用しています.

class Point {
  // ...
}

//   
var point = new Point(2, 3);

4.クラスの継承
Classはextensのキーワードによって継承を実現できます.これはES 5のプロトタイプチェーンを修正することによって継承を実現します.

class Point {
}

class ColorPoint extends Point {
}

上のコードは、extendsキーを通じて、Pointクラスのすべての属性と方法を継承するColorPointクラスを定義しています.しかし、コードが配置されていないため、これらの2つのクラスは全く同じで、Pointクラスをコピーしたものと同じです.
サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうでないと、新しいインスタンスを作成する時にエラーが発生します.
サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうでないと、新しいインスタンスを作成する時にエラーが発生します.これは、子類は自分のthisの対象ではなく、父類のthisの対象を継承しているからです.superメソッドを起動しないと、サブクラスはthisオブジェクトを得られません.

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor() {
  }
}

let cp = new ColorPoint(); // ReferenceError

サブクラスにconstructorの定義がない場合、この方法はデフォルトで追加されます.

class ColorPoint extends Point {
}

//    
class ColorPoint extends Point {
  constructor() {
    super();
  }
}

5.superキーワード
superを関数として呼び出すと、親の構造関数を表します.
ES 6は、サブクラスの構造関数がsuper関数を実行しなければならないと要求しています.さもなければ、JavaScriptエンジンがエラーを報告します.
superは親の構造関数を表しているが、サブクラスの例、すなわちsuper内部のthisはサブクラスの例を返している.

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

関数としては、super()は、サブクラスのコンストラクターの中だけで使用できます.他のところに使うとエラーが発生します.

class A {}

class B extends A {
  m() {
    super(); //   
  }
}