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"} 

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

如果重要的话，我会使用 strict 编码。

谁能解释一下为什么会这样？

像这样设置缓存

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"

单击控制台中的某个展开按钮 (>) 后。就在您执行此操作之前，图像实际上已经完成加载，因此您可以看到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. 您点击了“>”，展开了由console.log(assets.assets) 打印的[Object]，并在那里看到了cache，因为它现在已经在那里了。