javascript - 从异步调用访问另一个对象原型(prototype)上的对象

Question

我有一个异步调用，当它完成时，我想在父级上设置一个属性。

参加以下类(class)，猫:

var cat = function(){
   this.isLoaded = false;
   this.image = new Image();
   this.image.onload = function(){
     //how can I set the isLoaded variable above from here??
   }
   this.image.src = "...";
}

我希望能够做到:

var myCat = new cat();
if(myCat.isLoaded)
....

我似乎无法弄清楚如何从 onload 中设置上面的 isLoaded 属性。我可以通过执行“isLoaded”来访问它，但我认为我是按值访问它，而不是引用，因此无法更改它。

这似乎是一个简单的解决方案，我想我缺乏更深入的理解。

谢谢!

Answer 1

在onload回调中，isLoaded是undefined，如果你设置它，它会是window.isLoaded(本质上是全局的)。

回调的 this 也指向一个 img 元素，而不是它的父函数。我制作了一个指向外部函数的 this 的 that 变量。函数中的函数可以访问其外部函数在 JavaScript 中的作用域。

var Cat = function(){
   this.isLoaded = false;
   this.image = new Image();
   var that = this;
   this.image.onload = function(){
     that.isLoaded = true;
   }
   this.image.src = "http://www.gravatar.com/avatar/5e28492984e3056904e295c43337655f?s=32&d=identicon&r=PG";
}

var c = new Cat();

console.log(c.isLoaded); // false

setTimeout(function() { console.log(c.isLoaded) }, 1500); // true

jsFiddle .

当然，setTimeout() 仅用于此示例。如果您正在加载图像，则应依赖回调，因为确定图像是否已加载的唯一其他方法是轮询 - 这不是一个很好的接口(interface)。

你应该提供一个地方来传递回调，这样你就可以...

var c = new Cat(function() {
   // Image loaded, proceed.
});