javascript - 如何在回调方法中保留 'this'？

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));

问题是您正在传递对类方法的引用，但它没有绑定(bind)到 this 中的实例，除非您调用 .bind().