Question

我正在制作一个游戏，我将多个图块对象存储在一个数组中，我正在尝试调用一个函数＆＃34;更新＆＃34;，将图块绘制到屏幕上。

我的剧本：

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();
}

我还尝试使用对象而不是数组作为tile容器，但它也没有用。它将此错误输出到控制台：

TypeError: i.update is not a function

Answer 1

当你使用for ... in循环时，i实际上是指对象的属性名称。在这种情况下，tiles是一个数组，因此i可以被认为是该数组的索引（但要注意，JS中的数组基本上只是具有索引作为属性名的特殊对象）。 / p>

HOWEVER 正如@ 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 on-in

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

SO Answer

如何在所有对象的属性上调用函数？

1 个答案: