JavaScript: ブラウザが、クラスのプライベートフィールドに対応しているかチェックする

1. 目的

ブラウザが、JavaScript におけるクラスのプライベートフィールドに対応しているか確認する。

2. 確認方法

このページには、以下の JavaScriptコードが記述されています。

class Rectangle {
  height = 0;
  #width;  // これがプライベートフィールドです
  static #depth = 1;

  constructor(height, width) {
    this.height = height;
    this.#width = width;
  }

  volume(){
    return this.height * this.#width * Rectangle.#depth;
  }
}

try {
  const obj = new Rectangle(100, 200);
  console.dir(obj);
  console.dir(obj.height);
} catch (err) {
  console.error(err);
}

ブラウザのコンソールを開き、プライベートフィールドを使っていることに対するエラーが発生していないか確認してください。エラーがなければ、そのブラウザはプライベートフィールドに対応していると考えてよいです。

また、対応している場合であっても、ブラウザのコンソールで obj.#width と入力して Enterキーを押すとエラーになることも確認しておきましょう（プライベートフィールドはこのような形で呼び出せません）。

例

Chrome 77 の場合、以下のように表示されます。

プライベートフィールド #width が表示されていることが分かります。

3. メモ

4. 参考