【独学JavaScript入門⑳】クラスとインスタンス

クラスとインスタンスについて今回はご説明します。

スポーツジムで例えたいと思います。スポーツジムでは入会申込書が用意されています。この未記入の入会申込書が「クラス」のイメージです。項目は決まっていますが具体的な数値や文字列は入っていません。空っぽの入会申込書からはどんなお客様かイメージできません。

入会申込書(クラス)
氏名name
身長ht
体重wt

太郎さんが入会申込書の各項目(フィールド)に記入しました。

入会申込書(入力済み=インスタンス)
氏名nametaro
身長ht170
体重wt60

記入された入会申込書からは太郎さんがイメージできるようになりました。このように空っぽだったクラスに具体的な数値や文字列などを入力することを「インスタンス化」、そしてのデータを持ったクラスのことを「インスタンス」と呼びます。

入会申込書に記入できるのは「人」だけなので、入会申込書に記入を行った「太郎さんは人です」という条件も付けたいと思います。

//クラスの宣言 人は以下の情報を持つ
//コンストラクタとはインスタンスを
//生成するときの関数のようなもの

class human {
   constructor(name, ht, wt) {
      this.name = name;
      this.ht = ht;
      this.wt = wt;
   }
}
//インスタンス化
var 変数名 = new クラス名(データ1, データ2・・・);

//右が切れたら左にスワイプしてください

実際にデータを入力してみます。「this」というキーワードが登場しますが別の回でご紹介しますのでとりあえず付けておいてください。

//クラスの宣言 人は以下の情報を持つ
class human {
   constructor(name, ht, wt) {
      this.name = name;
      this.ht = ht;
      this.wt = wt;
   }
}
//インスタンス化
var taro = new human("taro",170, 60);

//プロパティを出力してみる
console.log(taro.name);
console.log(taro.ht);
console.log(taro.wt);

//右が切れたら左にスワイプしてください

インスタンス化は次にように行うこともできます。

//クラスの宣言 人は以下の情報を持つ
class human {
   constructor(name, ht, wt) {
      this.name = name;
      this.ht = ht;
      this.wt = wt;
   }
}

//インスタンス化はこれでもOK
var taro = new human();

taro.name = "taro";
taro.ht = 170;
taro.wt = 60;

//プロパティを出力してみる
console.log(taro.name);
console.log(taro.ht);
console.log(taro.wt);

//右が切れたら左にスワイプしてください

前回分と合わせてここまでをまとめると、入会申込書(クラス)の項目(フィールド)に太郎の身長や体重などの具体的なデータ(プロパティ)を入力すると(インスタンス化)、今まで空欄で意味を持たなかった入会申込書から太郎という具体的なイメージ(インスタンス)ができました。

ここで前回の太郎のオブジェクトとインスタンス化で定義しているものが全く一緒じゃないかと思われたかと思います。実はそうです。インスタンスの別名がオブジェクトになります。

JavaScript入門一覧に戻る