2020/09/02

【これだけ】JavaScriptのクラス【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptのクラスについて、クラスの定義と使い方に分け、簡単に解説していきます。

クラスの定義

Internet Explorer等のブラウザでなければ、JavaScriptでもクラスは利用可能です。

クラスは、”class クラス名{}”で宣言でき、その中で変数(プロパティ)や関数(メソッド)の定義をします。

class User {
    name = "";
    age = 0;
    constructor(name){
        this.name = name;
    }
    getInfo() {
        return this.name+"さんの年齢は"+this.age+"歳です。";
    }
}

上記のコードでは、Userクラスを宣言し、nameやageといったプロパティやgetInfoのメソッド、それからコンストラクタを定義しています。

クラスの使い方

クラスを使う際は、通常”new クラス名()”でインスタンス化をする必要があります。

インスタンス化するとコンストラクタが自動的に呼び出され、以降”インスタンス化変数名.プロパティ名もしくはメソッド名”で各機能の呼び出しが可能です。

var Tanaka = new User("田中");
Tanaka.age = 22;
console.log(Tanaka.getInfo());

上記のコードでは、先程のUserクラスをインスタンス化してnameプロパティに”田中”を代入し、その後でageプロパティに”22″を代入、getInfoメソッドを呼び出しています。

クラスの静的な定義と使い方

他のオブジェクト指向型言語同様に、JavaScriptでもインスタンス化なしでクラスを利用できます。

インスタンス化をしない場合は、そのクラスのプロパティやメソッドの名前の前にstaticを付けることで静的にする必要があります。

class User {
    static name = "";
    static age = 0;
    static getInfo() {
        return this.name+"さんの年齢は"+this.age+"歳です。";
    }
}
User.name = "田中";
User.age = 22;
console.log(User.getInfo());

上記のコードでは、先程のクラスのプロパティやメソッドを全て静的なものに変えており、インスタンス化なしで”クラス名.プロパティ名もしくはメソッド名”で直接呼び出しています。

• facebook
• Tweet
• Read Later