今回も「クラス」についてみていきます。
1 クラス
前回のコードです。
HTML(一部)
<script>
class Tri{
constructor(name, base, height){
this.name = name;
this.base = base;
this.height = height;
}
calcArea() {
return ( this.base * this.height ) / 2 ;
}
}
tr1 = new Tri("三角形", 6, 8);
tr2 = new Tri("さんかくけい", 8, 12);
tr3 = new Tri("トライアングル", 8, 14);
let area1 = tr1.calcArea();
let area2 = tr2.calcArea();
let area3 = tr3.calcArea();
document.write("<p>" + tr1.name + "の面積は" + area1 + "です。</p>");
document.write("<p>" + tr2.name + "の面積は" + area2 + "です。</p>");
document.write("<p>" + tr3.name + "の面積は" + area3 + "です。</p>");
</script>
ブラウザ
この例ではオブジェクトを一つ一つ扱っています。
ところで、配列には文字列や数値などの値だけでなく、さまざまな要素を入れることができるのでしたね。
そのことを利用してもっと短いコードにしてみましょう。
2 配列にオブジェクトを入れる
下の例は、インスタンスを生成して配列に挿入するものです。
HTML(一部)
<script>
class Tri{
constructor(name, base, height){
this.name = name;
this.base = base;
this.height = height;
}
calcArea() {
return ( this.base * this.height ) / 2 ;
}
}
let tris = [];
tris.push(new Tri("三角形", 6, 8));
tris.push(new Tri("さんかくけい", 8, 12));
tris.push(new Tri("トライアングル", 8, 14));
tris.forEach(function(tri){
let area = tri.calcArea();
document.write("<p>" + tri.name + "の面積は" + area + "です。</p>");
});
</script>
ブラウザ
まず、空の配列 tris を作成し、Tri クラスから生成したオブジェクトを3回にわたって、配列 tris に追加しています。
その後、forEach メソッドを利用して、配列 tris から次々と要素を取り出し変数 tri に代入して、そのオブジェクト及びメソッドを呼び出して出力しています。
3 次回
かなり効率的になってきましたね。
次回は、継承とオーバーライドを学習します。
カテゴリー
更新記事
- 『日本経済新聞』を読む 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)