【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プログラミング