JavaScript でオブジェクト 5

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


1 継承

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

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

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

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


2 継承を実装する

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

オブジェクト

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

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

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

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


3 オーバーライド

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

オブジェクト

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

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

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

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


4 次回

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

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (8) コーチング (1) チーズ (2) ネズミ (2) ノート (2) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (8) IGS (8) Kラーニング (1)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]
価格:2,728円(税込、送料無料) (2024/2/16時点)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)




Categories: