今回はクラスの継承とオーバーライドについてみていきます。
1 継承
継承とは、クラスの機能を受け継いで新たなクラスを作ることをいいます。
イメージ
→ トラック(荷台) → 個々のトラック
自動車(タイヤなど)→ バス(座席) → 個々のバス
→ スポーツカー(エアロ)→ 個々のスポーツカー
よく例示されるのが自動車ですね。
自動車の走るという機能を受け継ぎつつ新しい機能が付け加えられ、新たな乗り物が作られています。
上の例では、トラックの新たな機能は「荷台」、バスは「多くの座席」、スポーツカーなら「エアロパーツ」といったところでしょうか。
そして、その新しい種類の乗り物が生産されて、個々のトラックなどになります。
もとのクラスを「スーパークラス」、新しいクラスを「サブクラス」といいます。
なお、上の例では、自動車は「スーパークラス」、トラック、バス及びスポーツカーは「サブクラス」となります。
そして、個々のトラックなどが「インスタンス」というわけです。
書式
class サブクラスの名前 extends スーパークラスの名前{
サブクラスでの処理
}
また、親子関係に例えると。
書式
class 子クラスの名前 extends 親クラスの名前{ 子クラスでの処理 }
2 継承を実装する
よく使われる、足し算と引き算のメソッドで試してみましょう。
なお、参照されるものから定義していくのは、関数のときと同様ですので、すーばクラスから定義していくことになります。
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>
ブラウザ
以下、全体を3つに分けてみていきましょう。
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 メソッドをも使用できることになるのです。
もちろんプロパティも再定義することができます。
3 オーバーライド
次は、スーパークラスからサブクラスへ機能を引き継ぎつつ、処理を変えたい場合です。
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>
ブラウザ
サブクラスはメソッドを上書きしているので、出力結果が異なります。
以下、全体を3つに分けてみていきましょう。
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 にはサブクラスのメソッドを適用した結果を代入しています。
4 次回
今回はクラスの応用編といったところでした。
次回からは、実際のサイトを作る際に注意すべき点をまとめてみます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
タグ
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) ことば (2) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)