【javascript】クラスについて

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

• 入門JavaScriptプログラミング

class DaStore {
  fetch() {
    //ajaxのコールバックとしてthis.callbackを指定
    ajax(this.url, this.callback);
  }
  callback(records) {       //このメソッドはバインドされないため
    this.records = records // thisキーワードは
                          // このインスタンスを指していない
  }
}

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

##解決法

###アロー関数を使用する

class DaStore {
  fetch() {
    ajax(this.url, records => this.records = records);
  }
}

#superキーワード
スーパークラスのコンストラクタやメソッドの呼び出しを可能にする。
##コンストラクタでのthisの参照
コンストラクタでsuperを使う場合、thisを参照する前にsuperを呼び出すに必要がある。
##使い方

super.プロパティ名
super.メソッド名()

#クラス拡張時の注意
クラスのプロパティにアロー関数を参照させることでメソッドをバインドできる。

class DataStore {
  fetch() {
    ajax(this.url, this.callback)
  }
  callback = (records) => {
    //処理
  }
}

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

callbackメソッドはDataStoreプロトタイプに追加されない

callbackメソッドは作成されたインスタンスに直接追加される

つまりsuprは使えない。
サブクラスでこのメソッドを使いたい場合どうするか。

対策としては
実際のメソッドとして定義して
コンストラクタの中でインスタンスにバインドする
というものがある

class DataStore {
  constuctor() {
    //プロトタイプのcallbackメソッドをインスタンスにバインド
    this.callback = this.callback.bind(this)
  }
  fetch() {
    ajax(this.url, this.callback)
  }
  callback(records) {
    //処理
  }
}

class SubStore extends DataStore {
  callback(records) {
    super.callback(records)
  }
}

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