【JavaScript】クラス / オブジェクトプロパティ - 生成するオブジェクトのプロパティ

JavaScriptのクラスのオブジェクトプロパティについて解説します。

クラス/オブジェクトプロパティ

クラスに生成するオブジェクトのプロパティを定義できます。

プロパティ構成が同じオブジェクトを簡潔に複数生成することが可能になります。

オブジェクトプロパティの定義

クラス定義のブロック内にプロパティ名を記述します。

基本構文

class クラス名 {
    プロパティ１;
    プロパティ２;
    プロパティ３;
    ...
}

サンプル

class Person {
    ___ih_hl_start
    name;
    height;
    ___ih_hl_end
}

クラスの定義のみでは、動作への影響はありません。

オブジェクトプロパティのアクセス

クラスから生成したオブジェクトはクラスに定義したオブジェクトプロパティを持ちます。

クラスを使わないオブジェクトと同様にドット（.）記法でプロパティへのアクセスが可能です。

class Person {
    name;
    height;
}

let p = new Person();

console.log(p);

___ih_hl_start
p.name = "TANAKA";
p.height = 175;
___ih_hl_end

console.log(p);

Person {name: undefined, height: undefined}
Person {name: 'TANAKA', height: 175}

Personクラスからオブジェクトを生成しています。

８行目の出力はPerson {name: undefined, height: undefined}となっており、nameプロパティとheightプロパティを持っていることが確認できます。

１０〜１１行目で各プロパティに値を設定しており、その後の１３行目の出力から各プロパティの値が設定されたことが分かります。