JavaScript でオブジェクト 3

 今回は「クラス」についてみていきます。


1 オブジェクト

 オブジェクトにはさまざまなプロパティやメソッドを定義することができ、したがって単なる変数よりも、情報を整理して格納することができます。
 しかし、次のような場合はどうでしょうか。

オブジェクト

 この例では定義の時点で値を入力しています。(さらに行数が増えるのを避けるためです。)
 このように3つのオブジェクトを定義してそれぞれ表示するだけでも、これだけの行数を要します。
 これまで、変数や繰り返し処理など、できるだけ少ないコードで処理を行うことに努めてきましたが、このオブジェクトの定義についても何とかならないのでしょうか?


2 クラス

 そこで「クラス」というものを利用します。

 もちろん、メソッドの名前や引数は複数記述することができます。
 なお、クラスは「オブジェクトを設計するもの」であるということができます。

オブジェクト

 コードを少なくすることができました。
 生成されたオブジェクトが3つなので大した効果がないかもしれませんが、これが何十、何百のオフジェクトを生成する場合には大きく違ってきます。


3 クラスの定義とインスタンスの生成

 上から みていきます。

「おや?」と思われた方、その通りです。
 オブジェクトではなく、constructor という特殊なメソッドで定義されていますね。

 そして、次の箇所では new クラス名 でオブジェクトを作っています。
 この生成されたオブジェクトのことを インスタンス といいます。

 このインスタンスを生成する動きをわかりやすくすると上のようになります。
 まず、インスタンスを生成するときに、constructor メソッドが呼び出され、引数として指定されている、 “三角形” が name に、 6 が base に、そして、 8 が height にそれぞれ代入されます。
 これが コンストラクタ の役割で、クラスからインスタンスを生成する際に呼び出されるメソッドです。

 これらのプロパティを持つオブジェクトが tr1 となります。
 メソッドについては前回説明したとおりの動きですね。
 今回の例では、これが3回繰り返されます。


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: