クラス
- Webサービスなどでは、オブジェクトをいくつも扱っています。
- 例えばログインが必要なサービスでは、ユーザー（利用者）に関するデータ（オブジェクト）を用いています。
- 効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法があります。
- 例えばユーザーのデータをいくつも作成する場合、最初に「ユーザーを生成するための設計図」を用意し、その設計図をもとにユーザーのデータを生成していく、といったことができます。
- 「設計図」のことをJavaScriptでは「クラス」と呼びます。
- たとえば「犬」というクラスを作ったら、そこから「ポチ」「コロ」みたいな具体的な犬（＝インスタンス）をいくつも作ることができます🐶
- クラスの戻り値はオブジェクトになります。
インスタンス
- クラス（設計図）から生成したオブジェクト（データ）のことです。
- オブジェクトを生成するための設計図を用意したら（クラスを定義できたら）、クラス（設計図）からオブジェクトを生成（データ）します。
-
クラスからオブジェクトを生成するには、「
new クラス名()」とします。- クラスから生成したオブジェクトは特別にインスタンスと呼びます。
- また、
AnimalクラスのインスタンスをAnimalインスタンスと呼びます。
constructor()
インスタンスが作られたときに実行される処理や関数、値や設定を追加するための機能です。
this
- そのインスタンス自身のことです。
- コンストラクタの中で「
this.プロパティ名 = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができます。 - また、クラス内で値やメソッドを呼び出す時は
this.メソッド名やthis.値などとします。
thisは呼ばれた時に、呼び出しているインスタンスに置き換えられます。
メソッド
- そのインスタンスの「動作」のようなものです。
- メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。
//Animalクラスを定義
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log("こんにちは");
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
// catインスタンス生成
const cat = new Animal('レオ',4);
上記のcatインスタンスの中身は下記となります。
Animal { name: 'レオ', age: 4 }
- 下記のようにオブジェクト指定で、中身を確認することもできます。
-
cat.name→レオ -
cat.age→4
-
上記でcat.info()を実行すると結果は下記となります。
こんにちは
名前はレオです
4歳です
console.log(cat.info())を実行すると、undefinedも取得してしまうので、注意してください！