JavaScript の class 構文とプロトタイプチェーン

この記事は

JavaScript の class 構文を使った場合に、プロトタイプチェーンがどのようになるかを把握したかったので図にまとめてみた。似たような記事はたくさんあるが、あくまで備忘録として。

コード

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Girl extends Person {
  speak() {
    console.log(`わたし、${this.name}。よろしくね！`);
  }
}

const madoka = new Girl('鹿目まどか');
madoka.speak(); // わたし、鹿目まどか。よろしくね！

const kyoko = new Girl('佐倉杏子');
kyoko.speak = function() {
  console.log(`${this.name}だ。よろしくな！`);
};
kyoko.speak(); // 佐倉杏子だ。よろしくな！

図

オブジェクトだけでなく、コンストラクタ関数もチェーンになっているのは知らなかった。そのおかげで static なメソッドも継承できるのか。

Girl.__proto__ === Person; // true
Girl.__proto__.__proto__ === Function.prototype; // true

参考

• 継承とプロトタイプチェーン