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

Javascript storing image in an object in an array, is there in console.log(), but when logging the object?

本文关键字：对象记录 log console 图像数组 Javascript 存储更新时间：2023-09-26

我有一个问题，我不能理解。

我有一个对象数组，数组中每个对象的属性是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是strawberry, 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

嗯…因为它还没有?

如果你这样做:

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。

所以我相信实际情况是:

console.log(assets.assets)打印出> [Object], cache实际上还没有出现，但你没有注意到这一点，因为它被隐藏/崩溃了。
console.log(assets.assets[0])打印出Object {id: "strawberry", source: "http://127.0.0.1/images/strawberry.png"}, cache也不存在。
图片已加载并附加到cache .

console.log(assets.assets)

[Object]

cache