javascriptのクラス内でコールバック関数にクラスのメンバー変数・メソッドを渡す方法に関して。

Question

javascript4日目の初心者です。
javascriptで動的にアンケートを生成するようなページを作成しようとしているのですが、ごちゃごちゃしてきたので、クラスを使って整理中です。

ところが、クラス内でコールバック関数を使い、さらにその中でクラスのメンバー変数・メソッドを使うところでつまずいております。

当初はthisでクラスごと渡すつもりでしたが、「Uncaught TypeError: this.imageSet is not a function」というエラーになりました。おそらく、コールバック関数内では、thisが、ロードした$("#attachmentPage")の中身になるため、うまくいかないのだと思います。

ただ、どうすれば、メンバー変数を渡せるのかわからずにつまずいてます。
一旦、関数内で、別変数に格納（var that = this;）してもダメでした。

運用上はこのような使い方をしないのでしょうか？
ご教授いただけますと幸いです。

下に現在の状況を簡単にソースで再現しました。

class Questionnaire {
    constructor(image) {
        this.image = image;
        setAttachmentPage();
    }
    
    setAttachmentPage() {
        $("#attachmentPage").load("attachmentPage.html", function() {
            this.imageSet(this.image); //<-- ここのthis.imageSetでエラー
        });
    }
    
    imageSet(image) {
        $("#attachmentPage").find("img.thumbnail").attr("src", image);
        :
        :
    }
}

$(fucntion() {
    var A = new Questionnaire("image/a.jpg");
    :
    :
})

Comments

[wtokuno]

> 一旦、関数内で、別変数に格納（var that = this;）してもダメでした。
このときのコードは具体的にはどのようなコードですか？
`setAttachmentPage()` には `this` が2個所ありますが両方とも `that` に書き換えましたか？

また、`setAttachmentPage()` はどのように呼び出していますか？

[miyabi-sun]

タイトルが少しおかしいですね。
これだとオブジェクト指向プログラミングの「依存性の注入」を指します。
「コールバック引数でクラスのthisを使う方法」くらいに変更したほうが良いでしょう。

Answer 1

ただ、どうすれば、メンバー変数を渡せるのかわからずにつまずいてます。

Arrow Functionで書きましょう。

    setAttachmentPage() {
        $("#attachmentPage").load("attachmentPage.html", () => {
            this.imageSet(this.image); //<-- ここのthis.imageSetでエラー
        });
    }

Comments

[JIN3X]

迅速な回答ありがとうございました。
たすかりました。

Answer 2

コールバック関数を定義すると、
thisを再宣言して上書きしてしまいます。
なのでES5時代は適当になんか変数を作ってthisを束縛して、中身で変数を使うやり方が一般的でした。
慣習的にselfを用意することが多いです。

setAttachmentPage() {
  const self = this;
  $("#attachmentPage").load("attachmentPage.html", function() {
    self.imageSet(self.image);
  });
}

class構文を使うということはES2015以降に対応しているので、
thisを束縛しない等のルール以外は無名関数と同じの動きをするアロー関数を利用してください。
書き方も簡素になっているのでfunction () {}という記述はJavaScriptにそれなりに成熟したエンジニアも滅多に使いません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

setAttachmentPage() {
  $("#attachmentPage").load("attachmentPage.html", () => {
    this.imageSet(this.image)
  });
}

Comments

[JIN3X]

丁寧に回答いただきありがとうございます。
勉強になりました。

Answer 3

一度変数に受けるとか・・・

<script>
class Questionnaire {
  constructor(image) {
    this.image = image;
    this.setAttachmentPage();
  }
  setAttachmentPage() {
    var obj=this;
    $("#attachmentPage").load("attachmentPage.html", function() {
     obj.imageSet(obj.image); 
    });
  }
  imageSet(image) {
    $("#attachmentPage").find("img.thumbnail").attr("src", image);
  }
}
$(function(){
  var A = new Questionnaire("image/a.jpg");
});
</script>
<div id="attachmentPage"></div>

• attachmentPage.html

<img class="thumbnail">

クラスを使ってるのにjQueryで処理しているのはなんとなくアンバランスな気はしますが・・・

Comments

[JIN3X]

おかげさまで解決しました。
ありがとうございました。