【Javascript ES7 & React】constructorやsuper(); this.を使わないClassの新しい書き方： Classes&Properties & Methods【ES6との違い】

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

キョウコ

ES7でのclassの書き方、さらにmethods、 propertiesのコーディングについてまとめました。ES7では（ES6と違って）constructor・super();・プロパティのthis.を使わないClassやmethodsの作り方をするので、よりシンプルなコードとなっています。

ES7でのclassやmethodsの作り方、propertiesの取り扱い

ES6ではconstructorを使ってclassを作成していましたが、ES７ではconstructorが不要でプロパティのthis.も不要ということで、前回のES6と同じソースコードを使って復習しました。class A extends B でも、super();が必要なくなったので、合わせて書いてみました。

class Human {
  gender = 'male';

  printGender = () => {
    console.log(this.gender);
  }
}

class Person extends Human {
  name = 'Max';
  gender = 'female';

 printMyName = () => {
   console.log(this.name)
 }
}

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

（jsbin.comで試し書きする時はJavascriptの部分を”ES6/Babel”に設定します。）

consoleで結果を確認すると、"Max" "female" という結果となります。

console.log()内で使用しているthis.についてはclass内のどのプロパティなのかを指すため使用するとのことです。