【JavaScript】継承について【基本講座】

JavaScriptでクラスの概念を理解したら、次は、継承です。
継承の良さは、クラスの再利用ができること。再利用できることによって一度設計したクラスをベース（親）にして、子クラスで記述しなくても使うことができます。

出典：http://www.photo-ac.com/

継承の基本

継承とは

クラスの継承というのは、あらかじめ作っていたクラスのメンバも使うことのできるクラスのことを言います。ややこしいかもしれませんが、もとからあるクラスを親クラス、継承するクラスを子クラスといいますので合わせて覚えていいてください。

継承のメリットは、親クラスのメンバがそのまま含まれることにあります。また、親クラスのメソッドと同名のメソッドを子クラスでも記述できます。これをオーバーライドと言います。

この継承を上手く使うことでソースの無駄を省くことができスッキリとした見やすいコードを書くことが可能になります。

継承の書き方

クラスのおさらい

class HogeHoge {
   constructor(id, name, password) {
      this.id = -1;
      this.name = "";
      this.password = ""
   }
}

class HogeHoge {

constructor(id, name, password) {

this.id = -1;

this.name = "";

this.password = ""

}

こんな感じで書いていきました。このメンバを継承したい場合、以下のように書きます。

class HogeHogeHoge extends HogeHoge {
   constructor(id, name, password)) {
      super(id, name, password);
   }
}

class HogeHogeHoge extends HogeHoge {

constructor(id, name, password)) {

super(id, name, password);

}

class 【子クラス名】 extends 【親クラス名】{}

この書き方で、｛｝内のブロックの書き方も今までのクラスと同じです。
オブジェクトの生成も子クラス名で生成すれば良いのです。

ただし、親クラスのコンストラクタを継承する時は、constructor(){}にsuper()で継承したいプロパティを記述します。
また、親メソッドを子クラス内で使う時は、「super.」をつけます。

class HogeHoge {
   constructor(id, name, password)) {
      this.id = -1;
      this.name = "";
      this.password = ""
   }

   printID() {
      console.log(this.id + "は" + this.name + "さん")
   }
}

class HogeHogeHoge extends HogeHoge {
   constructor(id, name, password)) {
      super(id, name, password);
   }

   super.printID();
}

class HogeHoge {

constructor(id, name, password)) {

this.id = -1;

this.name = "";

this.password = ""

}

printID() {

console.log(this.id + "は" + this.name + "さん")

}

class HogeHogeHoge extends HogeHoge {

constructor(id, name, password)) {

super(id, name, password);

}

super.printID();

}

このような感じで書けばよいだけです。これをオーバーライドと言います。

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。