JavaScript プロトタイプ

JavaScript 目次 - ray88’s diary
■プロトタイプ
　プロトタイプはインスタンスからクラスのメソッドを参照できる仕組みのこと。
　※新たなインスタンスを生成するごとにメモリ上にその分のデータを保存する領域は
　　異なる。プロパティは生成されたインスタンスごとに異なる値がセットされるべき
　　ものだが、メソッドに関しては全てのインスタンスについて共通で良いため、
　　メソッドについてもインスタンスの分だけ複製されメモリ容量を確保するのは無駄
　　である。この問題意を解決するのがプロトタイプの仕組みです。

■prototypeプロパティ
　JavaScriptではどのクラスもprototypeプロパティという特別な役割を持つプロパティを持っている。
　デフォルトではprototypeプロパティは空のオブジェクトだが、そこにメンバーを追加できる。
　そしてクラスのprototypeプロパティに追加されたメンバーはそのクラスを元に生成されたインスタンスから参照することができるという仕組みです。
※prototypeプロパティにはメソッドだけでなく、プロパティを追加することもできる。しかし、プロパティの値はインスタンスで異なるはずなので、その仕組みを利用することはすくないといえる。
　クラス共通で定数を扱いたい場合は、静的メンバーを使う方法もある。

■プロトタイプメソッド
　クラスのprototypeプロパティに定義されたメソッドのこと
　class文内に定義されたメソッドはプロトタイプメソッドになる。

【サンプルコード】

function myFunction(){
  //クラス「Person」を定義
  class Person{
    constructor(name,age){
      //thisキーワードを用いてnameプロパティ、ageプロパティを定義
      this.name = name;
      this.age = age;
    }
    //greetメソッドの定義
    greet(){
      console.log(`Hello! I am ${this.name}!`);
    }    
  }
  //クラス「Person」のインスタンスを生成し、定数pに代入
  const p = new Person('Bob',25);
  //greetメソッドを呼び出し
  p.greet();　//ここにブレークポイントを置く
}

上記コードの最終行「p.greet();」にブレークポイントを置いて実行し、デバッガを確認するとクラス「person」のprototypeプロパティの内部にconstructorメソッドとgreetメソッドが追加されており、一方でインスタンスpにはgreetメソッドは存在していない。