javascript - 无法弄清楚为什么不应该更新数组？

Question

我正在使用 Javascript 和 HTML5 Canvas 构建康威的生活游戏。此处的代码位于 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');
        }
    }
}

问题是，查看断点处cells的nextCellState数组，它们都将单击的单元格激活为true.

这是什么原因造成的？

Answer 1

当您复制cellsinto的内容时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
    })
);