Как сохранить «это» в методе обратного вызова?

Question

Я не понимаю, как я должен получить ссылку на экземпляр приложения в методе обратного вызова. Я смотрел на это: Как получить доступ к правильному this внутри обратного вызова? , но на самом деле не чувствовал, что я что-то получил от него.

class App
{
  constructor()
  {
    this.imageHandler = new ImageHandler();
    this.imageHandler.loadImages(["img.jpg"], this.create);
  }

  create()
  {
    console.log("Here 'this' is undefined");
    console.log(this.imageHandler.images[0]);
  }
}

class ImageHandler
{
  constructor()
  {
    this.images = [];
  }

  loadImages(urls, callback)
  {
    urls.forEach((url) => {
      var img = new Image();
      this.images.push(img);
      img.onload = () => {
        if (this.images.length == urls.length) {
          callback();
        }
      }
      img.src = url;
    });
  }
}

Таким образом, неуклюжий способ может заключать в себе ссылку на исходный экземпляр следующим образом:

this.imageHandler.loadImages(["img.jpg"], this.create, this);

loadImages(urls, callback, self)

callback(self);

create(self)

console.log(self.imageHandler.images[0]);

Но это кажется очень неловким способом сделать это. Могу ли я добиться этого другим, более элегантным способом?

Answer 1

Вместо этого:

this.imageHandler.loadImages(["img.jpg"], this.create);

Попробуйте это:

this.imageHandler.loadImages(["img.jpg"], this.create.bind(this));

Проблема в том, что вы передаете ссылку на метод класса, но он не привязан к экземпляру в this, если вы не вызовете .bind().