Question

我不知道如何在回调方法中获取应用程序实例的引用。我一直在看：How to access the correct this inside a callback?，但我并不觉得我从中得到了什么。

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()中的实例。

如何在回调方法中保留“ this”？

1 个答案: