通过异步调用访问另一个对象原型上的对象

Question

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

参加以下课程，猫：

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() 仅用于本示例。如果您正在加载图像，则应该依赖回调，因为确定图像是否已加载的唯一另一种方法是轮询 - 这不是一个很好的接口。

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

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

Answer 2

就像@alex 所说，您需要引用您的 cat 对象。

但如果您的互联网连接不佳，setTimeout 对您没有多大帮助。 这是一个使用回调功能而不是 setTimeout 的示例

var cat = function (callback) {
   var this_cat = this;
   this.isLoaded = false;
   this.image = new Image();
   this.image.onload = function(){
     //how can I set the isLoaded variable above from here??
    this_cat.isLoaded = true;
    if (callback instanceof Function) { //@alex tip: callback instanceof Function is more accurate. Chrome reports the regex literal is a function.
        callback();
    }
   }
   this.image.src = "/images/stand_logo.png";
}

var myCat = new cat(function () {
    console.log('cat loaded');
});