1

我有一个我无法理解的问题。

我有一个对象数组，数组中每个对象的属性是 id、source 和 cache。id 是标识符，source 是文件的来源，cache 是实际文件。

当我控制台记录整个数组时，我得到以下输出；

console.log(array);

[Object]
    0: Object
        cache: img
        id: "strawberry"
        source: "http://127.0.0.1/images/strawberry.png"

它清楚地表明该数组有一个索引 0，它是一个对象。该对象有一个缓存属性，它是一个图像对象，一个 id 是草莓，一个源是图像的源。

我的问题是试图检索缓存图像对象。经过测试，我发现如果我控制台记录实际索引 0 而不是我得到的整个数组；

console.log(array[0]);

Object {id: "strawberry", source: "http://127.0.0.1/images/strawberry.png"}

你可以看到缓存已经消失了吗？我不明白这个？

如果重要的话，我正在使用严格编码。

谁能解释为什么会这样？

像这样设置缓存

var Assets = function (assets) {

     this.assets = assets;
};

Assets.prototype.load = function () {

    // For each asset
    this.assets.forEach(function (asset, index) {
        // Create new image object
        var img = new Image();
        // Image load handler
        img.addEventListener("load", function () {
            // Add image to assets
            this.assets[index].cache = img;
        }.bind(this), false);
        // Set the image source
        img.src = this.assets[index].source;
    }, this);
};

var assets = new Assets([{id: "strawberry", source: "http://127.0.0.1/images/strawberry.png"}]);

assets.load();

console.log(assets.assets); // shows cache image obj

console.log(assets.assets[0]); // show no cache
4

1 回答 1

3

嗯...因为它还没有？

如果您执行以下操作：

setTimeout(function() {
    console.log(assets.assets[0]); // show cache
}, 1000); // adjust accordingly

然后你会看到cache。;)

this.assets[index].cache = img;在加载图像之前不会执行该行，并且由于 JavaScript 的异步特性，您console.log可能会更早执行，从而为您提供未定义的结果。

我很确定你得到了：

[Object]
    0: Object
        cache: img
        id: "strawberry"
        source: "http://127.0.0.1/images/strawberry.png"

单击控制台中的某个展开按钮 (>) 后。就在您执行此操作之前，图像实际上已经完成加载，因此您可以看到cache.

但是assets.assets[0]，对于.Object {id: "strawberry", source: "http://127.0.0.1/images/strawberry.png"}cache

所以我相信实际发生的是：

  1. console.log(assets.assets)打印出来的> [Object]，cache实际上还没有，但你没有注意到这一点，因为它被隐藏/折叠了。
  2. console.log(assets.assets[0])打印出来的Object {id: "strawberry", source: "http://127.0.0.1/images/strawberry.png"}，cache也不在那里。
  3. 图像已加载并附加到cache.
  4. 您单击“>”，将[Object]打印出来的内容扩展为console.log(assets.assets)，然后看到cache那里，因为它现在已经在那里了。
于 2013-04-13T23:58:32.917 回答