1. このページの目的
ECMAScript 2015 で導入された class 構文についてポイントをまとめる。
2. class 構文
基本形
class Foo {
// パブリックフィールド（ここでの記述は必須ではない）
name = ''
// プライベートフィールド（ここでの記述が必須）
#age = 0;
constructor(name, age) {
// インスタンスの変数（プロパティ）
this.name = name;
this.#age = age;
}
// 静的メソッド (Foo.hello() というように使う)
static hello() {
}
// プロトタイプメソッド
say() {
}
// ゲッター（このクラスのインスタンスは、obj.hobby という形式でアクセスできる）
get hobby() {
return 'xxx';
}
}
- クラス宣言は Hoisting されない。つまり、使うまでに宣言されてないといけない。
- クラス本体は Strict モード で実行される（より厳密な構文に従う）。
- プライベートフィールドは、コンストラクタの外に記述しておく必要がある。
- パブリックフィールドは、コンストラクタの外に記述しなくてもよい。
静的なプロパティ
静的なプロパティは、クラスの宣言外で定義しなければいけない。プロトタイプのプロパティも同様である。
Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;
Species
デフォルトコンストラクタ－をオーバライドすることができる。
class MyArray extends Array {
// species を親の Array コンストラクターで上書きする
static get [Symbol.species]() { return Array; }
}
let a = new MyArray(1,2,3);
let mapped = a.map(x => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array); // true
ミックスイン
以下の関数を生成することで、ミックスインを実装することができる。
- 引数: スーパークラス
- 戻り値: そのスーパークラスを継承するクラス（独自のメソッドを実装しておく）
let calculatorMixin = Base => class extends Base {
// 追加したいメソッド
calc() {
}
};
let randomizerMixin = Base => class extends Base {
// 追加したいメソッド
randomize() {
}
};
上記の mix-ins を利用してクラスを作成する例
class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
3. メモ
- プライベートフィールドは、使えるブラウザがまだ少ないので本番サイトでは使わないこと（2019年12月時点）。