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 回答