ES 6のClass詳細編

1.クラス紹介
ES 6のclassはただ1つの文法糖と見なすことができて、そのほとんどの機能、ES 5はすべてやり遂げることができて、新しいclassの書き方はただ対象の原型の書き方を更にはっきりさせて、更に対象に向かってプログラミングする文法に似ています.クラスのデータ型は関数であり,クラス自体は構造関数を指す.使用する場合も,クラスに対して直接newコマンドを使用し,構造関数の使い方と完全に一致する.
2.Classの基本文法

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  toString(){
     return `${this.x},${this.y}`
  }
}

1.ES 6書き方一つのクラスを定義し、Pointクラスの中にconstructorメソッド(構築方法)---E-S 5のコンストラクション関数Pointがあり、それに対応するのはES 6のPointクラスの構築方法である
2.PointクラスではtoStringメソッドも見ました.注意、クラスのメソッドを定義する場合は、メソッドの前にfunctionキーワードを付けずに、直接関数定義を入れればよい.メソッド間をカンマで区切ることはできません.そうしないと、エラーが発生することに注意してください.
ES 6のクラスは、完全に構造関数の別の書き方と見なすことができる(クラスのインスタンス上でメソッドを呼び出すのは、実はプロトタイプ上のメソッドを呼び出すことである)
コンストラクション関数のprototypeプロパティは、ES 6の「クラス」の上に引き続き存在します.実際、クラスのすべてのメソッドはクラスのprototypeプロパティに定義されます.

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

//    

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

クラスのメソッドはprototypeオブジェクトに定義されているため、クラスの新しいメソッドはprotypeオブジェクトに追加できます.

class Point {
  constructor(){
    // ...
  }
Object.assign(Point.protype,{
  toValue(){},
  toString(){}
  })
}

3.静的方法
クラスはインスタンスのプロトタイプに相当し、クラスで定義されたすべてのメソッドはインスタンスによって継承されます.1つのメソッドの前にstaticキーを付けると、そのメソッドはインスタンスに継承されず、クラスによって直接呼び出されることを「静的メソッド」と呼びます.

class Say {
  static sayHello() {
    return 'Hello World!';
  }
}

Say.sayHello() 

var say = new Say();
say.sayHello()
// TypeError: say.sayHello is not a function

静的メソッドにthisキーワードが含まれている場合、このthisはインスタンスではなくクラスを指します.

class Say {
  static fa() {
    this.fa_s();
  }
  static fa_s() {
    console.log('hello');
  }
  fa_s() {
    console.log('world');
  }
}

Say.bar() // hello

クラスの静的メソッドはインスタンスに継承できませんが、クラスに継承されます.
4.インスタンス属性の書き方
インスタンスプロパティはconstructor()メソッドのthisの上に定義するだけでなく、クラスの最上位に定義することもできます.書き方比較//インスタンス属性this.count定義はconstructor()メソッドにあります

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

//          ，    
class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

この新しい書き方の利点は,すべてのインスタンスオブジェクト自体の属性がクラスのヘッダに定義され,比較的整然と見え,このクラスにどのようなインスタンス属性があるかを一目で見ることができることである.
5.静的属性
静的プロパティとは、インスタンスオブジェクト(this)に定義されているプロパティではなく、Class.propNameのプロパティです.ES 6は,Class内部に静的手法のみがあり,静的属性がないことを明確に規定している.インスタンス属性法の前にstaticキーワードを付けることを提案したクラスの静的属性がある.

//    
class Foo {
  // ...
}
Foo.prop = 1;

//    
class Foo {
  static prop = 1;
}

6.クラスの継承
Classはextendsキーワードで継承を実現できます.これはES 5のプロトタイプチェーンを修正することで継承を実現するよりも、明確で便利です.1.サブクラスはconstructorメソッドでsuperメソッドを呼び出さなければならない.これは、サブクラス独自のthisオブジェクトが、親クラスのコンストラクション関数によって作成され、親と同じインスタンス属性とメソッドが得られ、それを加工し、サブクラス独自のインスタンス属性とメソッドを加えなければならないためである.superメソッドを呼び出さなければ、サブクラスはthisオブジェクトを得ることができない.

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); //      constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color + ' ' + super.toString(); //      toString()
  }
}

2.親の静的な方法は、布団類にも引き継がれます

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

3.Object.propotypeOf()Object.propotypeOfメソッドは、子から親を取得するために使用できます.この方法で1つのクラスが別のクラスを継承しているかどうかを判断し、

Object.propotypeOf(colorPoint) === Point
//true

4.superキーワードsuperというキーワードは、関数としてもオブジェクトとしても使用できます.この二つの場合、その使い方は全く異なる.
1つ目の場合、superが関数として呼び出されると、親の構造関数を表します.ES 6は、サブクラスのコンストラクション関数がsuper関数を1回実行しなければならないことを要求する.
第2の場合、superがオブジェクトである場合、一般的な方法では、親のプロトタイプオブジェクトを指す.静的メソッドでは、親を指します.
5.クラスのprototype属性と_proto_ツールバーの
サブクラスの_prop_プロパティ.コンストラクション関数の継承を表し、常に親を指します.
サブクラスprototypeプロパティの_prop_プロパティ、メソッドの継承を表し、常に親クラスのprototypeプロパティを指します.

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true