【Javascript ES6 & React】: Class・extends・super(); の使い方についての復習まとめ

2019年08月13日 2019年08月14日

キョウコ

JavascriptのClassについての考え方とextends、super();の使い方についての復習とまとめです。（ES7ではconstructorやthisが一部不要になっていますが、このページではES6の復習として、constructor, super(); 等を使用したコードの書き方をまとめています。）

JavascriptのClassとは？classをextendsするとどうなる？consoleでの例。super();の使い方

新しいUdemy講座では「Classはオブジェクトの設計図」という表現をしていました。

Javascriptで以下のようなコードを書くと、結果（console)はどのようになるか、という例です。

class Human {
  constructor() {
  this.gender = 'male';
  }
  
  printGender() {
    console.log(this.gender);
  }
}
  
  
class Person extends Human {
  constructor() {
    super();
    this.name = 'Max';
    this.gender='female';
  }

  printMyName() {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();

まず、HumanというClassを作成しています。次にHumanを受け継いだclass Person extends Humanを作成。

class Person が親（Human)のconstructorを実行するにはsuper();が必要となります。class A extends B { constructor () {　とくれば、必ずsuper();を書くと覚えておけば良さそうです。

このコードの場合、親（Human)ではthis.gender='male'と定義されているものの、Humanを受け継いでいるPersonでthis.gender='female'と再定義しているので、consoleに表示されるのは "Max" "female"となります。