子クラスに渡したコールバック関数内のthisが指すオブジェクトについて

Question

前提・実現したいこと

子クラス内のイベントの発生を検知し、親クラスのメソッドを実行させる処理を作成しております。
現在は子クラスのコンストラクタに、実行したい親クラスのメソッドを渡し、子クラスのイベント発生時にそのメソッドを実行させる、という処理を考えております。

発生している問題・エラーメッセージ

下記ソースコードを実行すると、渡したコールバック関数内の処理で、該当の関数が定義されていないとエラーが発生しております。

Uncaught TypeError: Cannot read property 'this.hoge' of undefined

該当のソースコード

class oya{
	constructor(){
		this.kodomo1 = new kodomo(this.callback);
		this.kodomo2 = new kodomo(this.callback);
	}

	callback(){
		this.hoge();
	}

	hoge(){
		//検知した処理
	}
}

class kodomo{
	constructor(callback){
		this.callback = callback;

		$('#fuga').on('click', () => {
			this.callback();
		})
	}
}

補足情報（FW/ツールのバージョンなど）

子クラス内に要素のイベントをセットしておりますが、kodomoクラスは役割ごとのオブジェクトを取りまとめており、oyaクラスはそれらを取りまとめるような役割を与えております。

Answer 1

単にthis.callbackとだけ書いて引数に渡すと、その時点でcallbackとthisの関係が切れてしまいます。

何らかの方法でthisを固定して渡す必要があります。

this.kodomo1 = new kodomo(this.callback.bind(this));

Comments

[Praline]

迅速なご回答ありがとうございます！
取り急ぎthisをbindすることで、望む処理にすることができました。
bindの理解が追いついてないようなので、勉強させていただきます。