Javascript 将图像存储在数组中的对象中，在 console.log() 中，但是在记录对象时？

Question

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

我有一个对象数组，数组中每个对象的属性是 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 是草莓和 source，图像的来源。

我的问题是试图检索缓存图像对象。经过测试我发现如果我控制台记录 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

Answer 1

嗯...因为还没有？

如果你这样做:

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

然后你会看到cache。 ;)

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

我很确定你有:

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

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

但是，对于 assets.assets[0]，整个 Object {id: "strawberry", source: "http://127.0.0.1/images/strawberry.png " 在图像加载之前被记录，因此您没有看到 缓存。

所以我相信实际发生的事情是:

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"，缓存也不在那里。
3. 图像已加载并附加到缓存。
4. 您单击“>”，展开 console.log(assets.assets) 打印出的 [Object]，然后看到 cache 在那里，因为它现在已经在那里了。