イベント先のthisについて

phaserで、オブジェクトを生成し、クリックイベントに関数を指定しておき
その関数から、インスタンス変数にアクセスしようとした場合

export class xxxxxx {
    constructor(scene, rnd) {
        this.scene = scene;
        this.data = [];
    }

    init(){
        // オブジェクト生成
       this.#createObject();

        // データ生成(略)
        this.createData(); // ここでthis.dataにデータを追加する
    }

    #createObject(){
        // オブジェクトを生成(実際はもっとちゃんといろいろ設定している)
        const obj = this.scene.add.rectangle(100, 100, 100, 100, 0x000000, 0); //透明なクリック検知プレート
        obj.setInteractive();
        obj.on("pointerdown", this.#clickAreaClick);
    }

    #clickAreaClick(pointer, localX, localY){
        console.log(this.data); // undefined
    }
}

#clickAreaClickメソッドがイベントハンドラとして登録されると、
そのメソッド内でのthisは、initインスタンスを参照せず、
イベントのターゲット(この場合はclickArea)を参照します。
そのため、this.tileDataがundefinedになります。

解決策(アロー関数を使用)

obj.on("pointerdown", (pointer, localX, localY) => {
    this.#clickAreaClick(pointer, localX, localY); 
});

解決策(bindメソッドを使用)

obj.on("pointerdown", this.#clickAreaClick.bind(this));
投稿日時: 2024-08-04 10:42:04

内部リンク

最近の投稿

タグ

アーカイブ

その他