javascript - 无法解决为什么不应该进行数组更新的原因？

我正在使用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');
        }
    }
}

问题是，在断点处查看cells和nextCellState数组，它们两个都将单击单元格激活为true。

是什么原因造成的？

最佳答案

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