【javascript】クラス

こちらの記事は以下の書籍を参考に執筆しました

• 入門JavaScriptプログラミング

クラス定義でインスタンスプロパティを設定する

各メソッドはプロトタイプに追加されるが
プロパティは各インスタンスに割り当てられる。

class DateStore {
  url = '/data/resources';
  records = [];
  fetch() {
    ajax(this.url, records => this.records = records);
  }
}
console.log(DateStore.url)//undefined
const store = new DateStore()
console.log(store.url)///data/resources
console.log(store.records.length)//0

出典：入門JavaScriptプログラミング

このように、クラスプロパティはインスタンスで使用可能になる。
これはコンストラクタメソッドの中で設定されたように処理される。

class DateStore {
  constructor() {
    url = '/data/resources';
    records = [];
  }
}

出典：入門JavaScriptプログラミング

プロパティをプロタイプに直接設定するのはバグのもと

クラスメソッドはクラスのプロトタイプに追加される。
メソッドはプロトタイプ継承され、インスタンスに継承される。

対して、クラスプロパティはプロタイプに追加されず、インスタンスで直接割り当てられる。

class DataStore {}

DataStore.prototype.records = []

const storeA = new DataStore()
console.log(storeA.records.length)//0

const storeB = new DataStore()
console.log(storeB.records.length)//0

storeB.records.push('Example Record')

console.log(storeA.records.length)//1
console.log(storeA.records[0])//Example Record

出典：入門JavaScriptプログラミング

recordsプロパティなhDataStoreのインスタンスではなくDataStoreのプロトタイプのプロパティに直接設定されている。
つまり、すべてのインスタンスが同じrecords配列を使用するということ。
すべてのオブジェクトが同じrecords配列を共有していることが問題。

静的プロパティ

クラスのオブジェクト(コンストラクタ)で設置される特殊なプロパティ。
インスタンスでもプロトタイプでも設定されない。
静的プロパティはインスタンス間で変化しない。

class DataStore {
  static domain = 'htt://example.com';//静的プロパティの割当
  static url(path) {                  //静的プロパティの設定
    return `${this.domain}${path}`
  }

  constructor(resource) {
    this.url = DataStore.url(resource) //静的メソッドの呼び出し
  }
}

const userStore = new DataStore('/users')
console.log(userStore.url)//htt://example.com/users

出典：入門JavaScriptプログラミング