【JavaScript】クラスの継承

【JavaScript】クラスの継承（子クラスの作り方）

親クラスをベースにした子クラスを作ることで、親クラスが持つ処理を子クラスに継承することができる。
継承することで、親クラスと子クラスの共通処理をsuperで短くまとめることができる。

子クラスの作り方

クラスを作る際に次のようにextendsで記述する。

class 子クラス名 extends 親クラス

プロパティやメソッドの継承にはsuper();を追加する

例文

テキストを表示するShowMessage クラスを拡張するため、ShowMessageExtends 子クラスを作る場合

親クラスの内容

    class ShowMessage {　//親クラス
        constructor(text) {
        this.text = text;
        }

        show() {
        console.log(`${this.text}`);
        }
    }

子クラスの内容

    class ShowMessageExtends extends ShowMessage {　//子クラス： class 子クラス名 extends 親クラス
        constructor(text, extendsText) {
        super(text);//super()で親クラスのプロパティを継承
        //this.text = text;　プロパティが継承
        this.extendsText = extendsText;　//子クラスShowMessageExtendsの独自処理（プロパティ）だけを書けばよい
        }

        show() {
        super.show();//super()で親クラスのメソッドを継承
        //console.log(`${this.text}`);メソッドが継承
        console.log(`and more ... ${this.extendsText}`);//子クラスShowMessageExtendsの独自処理（メソッド）だけを書けばよい
        }
    }

テキストの設定、出力処理

    const showMessages = [
        new ShowMessage('JavaScriptの勉強中'),
        new ShowMessage('Qiitaに投稿'),
        new ShowMessageExtends('Extend comments','written by kuro.'),//子クラスの処理
    ];

    showMessages[0].show();
    showMessages[1].show();
    showMessages[2].show();

実行結果

    JavaScriptの勉強中
    Qiitaに投稿
    Extend comments
    and more ... written by kuro.

実際に書いて、デベロッパーツールでの出力を確認しておりますが、誤りがありましたら、ご指摘頂けますと幸いです。