【JavaScript】クラスを定義する

こんにちは。
本日はJavaScriptメモです。

概要

JavaScriptでクラスを定義して
そのクラスを利用する。

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

以下のサンプルコードのクラスには

• 静的プロパティ(count)
• 静的メソッド(addCount)
• ゲッター/セッター(mul)
• コンストラクタ
• メソッド(add)

が存在しています。

class CalcA {
    static count = 0
    static addCount() {
        this.count++
    }

    get mul() {
        return Math.pow(this.x, 2)
    }

    set mul(num) {
        this.x = Math.sqrt(num)
    }

    constructor(x) {
        this.x = x
        CalcA.addCount()
    }

    add(num) {
        return this.x + num
    }
}

インスタンスを生成する場合はnew演算子を使います。

let cA = new CalcA(100)
console.log(`cA.x = ${cA.x}`)
console.log(`cA.add() = ${cA.add(5)}`)

実行結果は以下です。

cA.x = 100
cA.add() = 105

静的メソッドは、インスタンスを使用せずクラス経由でアクセスします。

console.log(`CalcA.count = ${CalcA.count}`)

実行結果は以下です。

CalcA.count = 1

ゲッター/セッターは()を使用せず呼び出すことができます。

console.log(`cA.mul = ${cA.mul}`)
cA.mul = 25
console.log(`cA.mul = ${cA.mul}`)

実行結果は以下です。

cA.mul = 10000
cA.mul = 25

クラスの継承

クラスを継承する場合はextendsを使用します。

先程のCalcAを継承したCalcBを定義します。

class CalcB extends CalcA {
    constructor(x, y) {
        super(x)
        this.y = y
    }

    add(num) {
        return super.add(num) + this.y
    }
}

superを使用してスーパークラスのコンストラクタやメソッドにアクセスできます。
スーパークラスを継承している場合にコンストラクタを記載する場合は
superの呼び出しを忘れないようにしてください。
記載を忘れた場合、ReferenceErrorが発生します。

式でクラスを定義する

今までサンプルで定義したクラスはそれぞれ以下のように
式で定義することも可能です。

const CalcA = class {
    ...省略...
}

const CalcB = class extends CalcA {
    ...省略...
}

<br />
<br />
以上です。