javascript - 如何对对象的所有属性调用函数？

Question

我正在制作一个游戏，其中将多个图 block 对象存储在数组中，并且我尝试调用函数“更新”，以将图 block 绘制到屏幕上。

我的脚本:

var canvas = document.getElementById("game canvas");
canvas.width = 600;
canvas.height = 300;
var g = canvas.getContext("2d");
var grass = new Image();
grass.src = "grass.png";
setInterval(draw,1000/60);

function tile(x,y,img) {
    this.x = x;
    this.y = y;
    this.img = img;
    this.update = function() {
        g.drawImage(this.img,this.x,this.y);
    }
}
var maps = {
    map1:{
        tiles:[
            new tile(0,0,grass),
            new tile(0,32,grass)
        ],

        update:function() {
            for (var i in this.tiles) {
                i.update();
            }
        }
    }
};

function draw() {
    maps.map1.update();
}

我还尝试使用对象而不是数组作为图 block 容器，但它也不起作用。它将错误输出到控制台:

TypeError: i.update is not a function

Answer 1

当您使用 for...in 循环时，i 实际上指的是对象的属性名称。在这种情况下，tiles是一个数组，因此i可以被认为是该数组的索引(但要小心，JS中的数组基本上只是带有索引的特殊对象作为属性名称)。

然而正如@jfriend00在评论中指出的那样，for..in将枚举对象的所有属性，因此可以访问一些可能不是的东西您期望的，或者没有要调用的 update() 的对象。

虽然你可以这样做:

update:function() {
    for (var i in this.tiles) {

        // get the current tile
        this.tiles[i].update();
    }
}

最好在数组上使用 forEach 循环，或使用标准 for 循环:

update:function() {

    // update each tile
    this.tiles.forEach(function(tile) {
        tile.update();
    }
}

或

update:function() {

    // normal for loop for safe indexing
    for (var i = 0; i < this.tiles.length; i++) {
        this.tiles[i].update();
    }
}

More info上for-in

SO Answer讨论所有类型的迭代技术