クラスの定義

class Anime {
  // コンストラクター
  constructor(options) {
    this.title = options.title;
  }

  // メソッド
  callTitle() {
    return this.title;
  }
}

const anime = new Anime({ title: 'リゼロ' });

console.log(anime);
// Anime {title: "リゼロ"}
console.log(anime.callTitle());
// リゼロ

コンストラクターの名前はconstructorで固定です。

※jsではpublic, protected, privateのようなアクセス修飾子は利用できません。 jsのクラスでは、全てのメンバーがpublicとなります。（どこからでもアクセスできる）

継承

継承とは、クラスの定義の共通する部分を別のクラスにまとめることです。

そうすることで、コードの重複を防ぐことができます。

class Rezero extends Anime {
  constructor(options) {
    super(options);
    this.deathCount = options.deathCount;
  }

  returnToDeath() {
    return `${this.deathCount}回死に戻りました。`;
  }
}

const rezero = new Rezero ({ title: 'リゼロ', deathCount:4 })

console.log(rezero);
// Rezero {title: "リゼロ", deathCount: 4}

console.log(rezero.callTitle());
// リゼロ

console.log(rezero.returnToDeath());
// 4回死に戻りました。

クラスを継承するにはextendsを使います。

Rezeroクラスで定義されたreturnToDeath()メソッドはもちろん、

Animeクラスで定義されていたcallTitle()メソッドも呼び出すことができます。

オーバーライド

基底クラス（Animeクラス）で定義されたメソッド、コンストラクターはサブクラス（Rezeroクラス）で上書きすることもできます。

これを、メソッドのオーバーライドと言います。

今回は基底クラス（Animeクラス）で定義されていたcallTitle()メソッドにサブタイトルも返すようにオーバーライドします。

class Rezero extends Anime {
  constructor(options) {
    super(options);
    this.deathCount = options.deathCount;
    this.subTitle = options.subTitle;
  }

    callTitle() {
      return `${this.title} ${this.subTitle}`;
    }

  returnToDeath() {
    return `${this.deathCount}回死に戻りました。`;
  }
}

const rezero = new Rezero ({ title: 'リゼロ', deathCount:4, subTitle: '18話　ゼロから' })

console.log(rezero);
// Rezero {title: "リゼロ", deathCount: 4, subTitle: "18話　ゼロから"}

console.log(rezero.callTitle());
// リゼロ 18話　ゼロから

console.log(rezero.returnToDeath());
// 4回死に戻りました。

コンストラクターの引数にはオブジェクトを渡しているので、コンストラクターにthis.subTitle = options.subTitle;を追記します。

そして、インスタンス化の際にsubTitleを追加します。

callTitle()メソッドの中身を書き換えます。

すると、callTitle()を呼び出すとtitleだけでなく、subTitleも返すようになります。

マッスル・メモリー

筋肉エンジニアのブログ

【js】クラスを定義する

クラスの定義

継承

オーバーライド