JavaScriptのクラスフィールドの話

最初に

MobXの勉強してたら、しれっとクラスフィールドが使われていたので、びっくりした。

どこかのバージョンで入るとは聞いていたけど、深追いしていませんでした。

ので、少し調べましたというお話。

20180607現在、ESnextのStage3です。

動作環境

自分の記事ですが、下記を参考にしてください。
https://qiita.com/tsuuuuu_san/items/d27b536fc39cf9fc899c#%E4%BB%98%E9%8C%B2

早速使う

参考：https://github.com/tc39/proposal-class-fields

フィールド宣言

ES2015の場合

class Myself {
    // この辺にクラスフィールド書きたいけど、書けないんだよ

    constructor() {
        // しょうがないので、ここに書くと使えるよ
        this.name = 'tsuuuuu_san';
    }
}

const myself = new Myself();
console.log('name:', myself.name);  // name: tsuuuuu_san

ESnextの提案

class Myself {
    name = 'tsuuuuu_san';
}

const myself = new Myself();
console.log('name:', myself.name);  // name: tsuuuuu_san

プライベートフィールド

フィールドに「#」をつけると、プライベートになる。

class Myself {
    name = 'tsuuuuu_san';
    #age = 16;

    get anserAge() {
        return this.#age;
    }
}

const myself = new Myself();
console.log('name:', myself.name);          // name: tsuuuuu_san
console.log('age:', myself.age);            // age: undefined
console.log('anserAge:', myself.anserAge);  // anserAge: 16