2022年1月10日 JavaScript (JS Primer) クラスのアクセッサプロパティの定義

クラスのアクセッサプロパティの定義

クラスに対してメソッドを定義できますが、メソッドはメソッド名()のように呼び出す必要があります。
クラスでは、プロパティの参照（getter）、プロパティへの代入（setter）時に呼び出される特殊なメソッドを定義できます。

定義方法はメソッド名（プロパティ名）の前にgetまたはsetをつけるだけです。

getter（get）には仮引数はありませんが、必ず値を返す必要があります。
setter（set）の仮引数にはプロパティへ代入する値が入りますが、値を返す必要はありません。

getterはプロパティの値を返します。参照時に呼び出されます。
setterは値を代入します。代入時に呼び出されます。

class クラス {
    // getter
    get プロパティ名() {
        return 値;
    }
    // setter
    set プロパティ名(仮引数) {
        // setterの処理
    }
}
const インスタンス = new クラス();
インスタンス.プロパティ名; // getterが呼び出される
インスタンス.プロパティ名 = 値; // setterが呼び出される

次のコードでは、NumberWrapperクラスのvalueプロパティをアクセッサプロパティとして定義しています。 valueプロパティへアクセスした際にそれぞれ定義したgetterとsetterが呼ばれているのがわかります。
このアクセッサプロパティで実際に読み書きされているのは、NumberWrapperインスタンスの_valueプロパティとなります。

class NumberWrapper {
    constructor(value) {
        this._value = value;
    }
    // `_value`プロパティの値を返すgetter
    get value() {
        console.log("getter");
        return this._value;
    }
    // `_value`プロパティに値を代入するsetter
    set value(newValue) {
        console.log("setter");
        this._value = newValue;
    }
}

const numberWrapper = new NumberWrapper(1);
// "getter"とコンソールに表示される
console.log(numberWrapper.value); // => 1
// "setter"とコンソールに表示される
numberWrapper.value = 42;
// "getter"とコンソールに表示される
console.log(numberWrapper.value); // => 42

出力結果

getter
1
setter
getter
42

以下の流れで出力されています。

new演算子に引数を渡します。
console.log(numberWrapper.value);とするとプロパティが参照されたため、getterが呼び出され、console.log();の出力とvalueである”１”が返されます。
numberWrapper.value = 42;とすることでsetterが呼び出されます。
console.log();の出力とプロパティを参照して代入が行われます。
最後のconsole.log(numberWrapper);でgetterが再度呼び出され、代入された42が出力されます。