javascript - 为什么这个 Javascript 图像对象没有添加到图像数组中？

Question

我一直在尝试创建一个基于 HTML5 的小型示例，但遇到了一些问题。我想在 <canvas> 上渲染一 block 石头但是这个 Javascript 对象将无法正常工作。

function ImageData() {
    this.image_names = ["rock1"];
    this.images = new Array();
    this.loadResources = function () {
        for (var i = 0; i < this.image_names.length; i++) {
            var img = new Image();
            img.onload = (function (a) {
                a.images[a.image_names[i]] = img;
                console.log(a.images); //log is successful, image is in array
            })(this);
            img.src = "images/" + this.image_names[i] + ".png";
        }
    }
}

使用方法如下:

var a = new ImageData();
a.loadResources();
var rock1_image = a.images["rock1"]; //the "rock1.png" image

如果您尝试通过控制台访问该对象，您会在确定图像已加载后看到图像数组中没有图像。我不知道为什么它不起作用。我已经看过很多次了。

编辑:这是我最终的工作结果:

function ImageData() {
    this.image_names = ["rock1"];
    this.images = new Array();
    this.loadResources = function (callback) {
        for (var i = 0; i < this.image_names.length; i++) {
            var img = new Image();
            img.onload = (function (a, i) {
                return function() {
                    a.images[a.image_names[i]] = img;
                    if (i == (a.image_names.length - 1)) callback();
                };
            })(this, i);
            img.src = "images/" + this.image_names[i] + ".png";
        }
    }
}

Answer 1

我敢说您正试图在将它添加到您的阵列之前访问它。我建议向您的 loadResources 方法添加回调或其他内容，以确保在您尝试访问它之前它就在那里。

this.loadResources = function (callback) {
    for (var i = 0; i < this.image_names.length; i++) {
        var img = new Image();
        img.onload = (function (a, i) {
            return function() {
                a.images[a.image_names[i]] = img;
                console.log(a.images); //log is successful, image is in array
                callback();
            };
        })(this, i);
        img.src = "images/" + this.image_names[i] + ".png";
    }
} 

然后

var a = new ImageData();
var rock1_image;
a.loadResources(function() {
    rock1_image = a.images["rock1"];
    // do whatever you need to do with the image in here.
});

此外，@Igor 提到的内容。我完全错过了。我调整了上面的代码，这样您就可以保留您的 this 作用域，而无需在其他地方进行设置。

已更新以解决@RobD 提出的 i 问题。