无法解决为什么阵列更新时不应该?

时间:2013-04-24 18:07:48

标签: javascript jquery arrays debugging canvas

我正在使用Javascript和HTML5 Canvas构建Conway的生活游戏。 这里的代码在gameOfLife对象的上下文中:

this.cells = [];
this.nextCellState = [];

使用我的单元格对象填充this.cells后,我会像这样填充this.nextCellState

this.nextCellState = this.nextCellState.concat(this.cells);

单击鼠标时,相应的单元格对象属性isAlive将变为true:

function clickAlive(x, y) {
    for (var i in this.cells) {
        if (x.between(this.cells[i].x, this.cells[i].x + cellsize) && y.between(this.cells[i].y, this.cells[i].y + cellsize)) {
            this.cells[i].isAlive = true;
            console.log('Breakpoint');
        }
    }
}

问题是,看一下断点处的cellsnextCellState数组,它们都将点击的单元格激活为true

造成这种情况的原因是什么?

1 个答案:

答案 0 :(得分:2)

cells的内容复制到nextCellState时,您正在制作数组的浅表副本。对象本身现在由两个数组别名(即cells[0]nextCellState[0]引用相同的对象。)

您需要在nextCellState中创建新对象,以便能够独立更改对象的内部状态。如果您的单元格对象具有复制构造函数,则最简单。然后你可以做这样的事情:

this.nextCellState = this.nextCellState.concat(
    this.cells.map(function(cell) {
        return cell.copy();  // or whatever your copy constructor is
    })
);