今回はクラスの継承とオーバーライドについてみていきます。

---

１　継承

　継承とは、クラスの機能を受け継いで新たなクラスを作ることをいいます。

イメージ

　　　　　　　　　　→　トラック（荷台）　　　→　個々のトラック
自動車（タイヤなど）→　バス（座席）　　　　　→　個々のバス
　　　　　　　　　　→　スポーツカー（エアロ）→　個々のスポーツカー

　よく例示されるのが自動車ですね。
　自動車の走るという機能を受け継ぎつつ新しい機能が付け加えられ、新たな乗り物が作られています。
　上の例では、トラックの新たな機能は「荷台」、バスは「多くの座席」、スポーツカーなら「エアロパーツ」といったところでしょうか。
　そして、その新しい種類の乗り物が生産されて、個々のトラックなどになります。

　もとのクラスを「スーパークラス」、新しいクラスを「サブクラス」といいます。
　なお、上の例では、自動車は「スーパークラス」、トラック、バス及びスポーツカーは「サブクラス」となります。
　そして、個々のトラックなどが「インスタンス」というわけです。

書式

class サブクラスの名前 extends スーパークラスの名前｛
    サブクラスでの処理
｝

　また、親子関係に例えると。

書式

class 子クラスの名前 extends 親クラスの名前｛
    子クラスでの処理
｝

---

２　継承を実装する

　よく使われる、足し算と引き算のメソッドで試してみましょう。
　なお、参照されるものから定義していくのは、関数のときと同様ですので、すーばクラスから定義していくことになります。

HTML（一部）

<script>
    class Calculation{
        constructor(x, y){
            this.x = x;
            this.y = y;
        }
        add(){
            let z = this.x + this.y;
            return z;
        }
    }

    class Calculation_A extends Calculation{
        sub(){
            let z = this.x - this.y;
            return z;
        }
    }

    calculation_B = new Calculation_A(20, 10);
    document.write("<p>" + calculation_B.add() + "</p>");
    document.write("<p>" + calculation_B.sub() + "</p>");
</script>

ブラウザ

　以下、全体を３つに分けてみていきましょう。

HTML（一部）

<script>
    class Calculation{
        constructor(x, y){　コンストラクタ
            this.x = x;
            this.y = y;
        }
        add(){
            let z = this.x + this.y;　メソッド
            return z;
        }
    }

　この部分はクラスの定義と同様ですね。

HTML（一部）

    class Calculation_A extends Calculation{　継承
        sub(){
            let z = this.x - this.y;　新メソッド（スーパークラスにはない）
            return z;
        }
    }

　ここで、スーパークラス（親クラス）からサブクラス（子クラス）へとプロパティとメソッドが引き継がれ、さらに新たなメソッドが定義されています。

HTML（一部）

    calculation_B = new Calculation_A(20, 10);　インスタンス生成
    document.write("<p>" + calculation_B.add() + "</p>");　継承により使用可能
    document.write("<p>" + calculation_B.sub() + "</p>");
</script>

　したがって、サブクラス（子クラス）からインスタンスを生成すると、サブクラス（子クラス）で定義している sub メソッドだけでなく、スーパークラス（親クラス）で定義している add メソッドをも使用できることになるのです。
　もちろんプロパティも再定義することができます。

---

３　オーバーライド

　次は、スーパークラスからサブクラスへ機能を引き継ぎつつ、処理を変えたい場合です。

HTML（一部）

<script>
    class Car{
        constructor(name){
            this.name = name;
        }
        show(){
            return "名前が「" + this.name + "」という車です。";
        }
    }

    class Truck extends Car{
        show(){
            return super.show() + "すばらしい車です。";
        }
    }

    product_A = new Car("カー");
    product_B = new Truck("トラック");

    document.write("<p>" + product_A.show() + "</p>");
    document.write("<p>" + product_B.show() + "</p>");
</script>

ブラウザ

　サブクラスはメソッドを上書きしているので、出力結果が異なります。
　以下、全体を３つに分けてみていきましょう。

HTML（一部）

<script>
    class Car{
        constructor(name){　コンストラクタ
            this.name = name;
        }
        show(){
            return "名前が「" + this.name + "」という車です。";　メソッド
        }
    }

　分かりやすいように、プロパティ、メソッドをそれぞれ一つにしました。

HTML（一部）

    class Truck extends Car{　継承
        show(){
            return super.show() + "すばらしい車です。";
        }　スーパークラスのメソッド show を上書き
    }

　ここで継承しつつ、メソッドを上書きします。
　super.show() というメソッドに追加して、”すばらしい車です。” と出力されるようにしています。

HTML（一部）

    product_A = new Car("カー");　スーパークラスからインスタンスを生成
    product_B = new Truck("トラック");　サブクラスからインスタンスを生成

    document.write("<p>" + product_A.show() + "</p>");
    document.write("<p>" + product_B.show() + "</p>");
</script>

　変数 product_A にはスーパークラスのメソッドを適用した結果を代入し、
変数 product_B にはサブクラスのメソッドを適用した結果を代入しています。

---

４　次回

　今回はクラスの応用編といったところでした。
　次回からは、実際のサイトを作る際に注意すべき点をまとめてみます。