javascript - 拆分时超出最大调用堆栈大小

Question

试图复制 Agar的拆分功能，但当我调用它时，超出了最大调用堆栈大小。 ( JSFiddle ) [注意:不要点击 Canvas ，因为这会触发拆分功能)

这是导致溢出的片段:

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },
    mass: this.mass,
    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

它仅在我将某些东西插入 this.cells 时发生。以任何其他方式修改 this.cells 或插入其他数组或其他任何方式都可以正常工作。请注意，将 this.cells 插入它当前所在的 for 循环之外可以正常工作。 (不会产生预期的效果，但不会像当前那样导致溢出)

为什么它会导致溢出？我该如何防止它并使拆分功能正常工作？

Answer 1

在 split 的这一行:

for (var i = 0; i < this.cells.length; i++)

它会在每次迭代中获取 cell 的最新 length，并且当你向其中放入内容时，i 永远不会超过长度，所以它会永远循环。

使用:

// Get the init value of the length, 
// so push something into this.cells won't make it unable to end.
var length = this.cells.length;
for (var i = 0; i < length; i++) {

制作长度的临时副本以防止这种情况。或

// Start at the end of the array, if the order is not a concern.
for (var i =  this.cells.length - 1; i >= 0; i--)

在数组末尾开始迭代。

顺便说一句，为了显示正确的拆分结果，

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },
    mass: this.mass,
    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

应该改为

this.cells.push({
    coords: {
        x: this.cells[i].coords.x + 50,
        y: this.cells[i].coords.y
    },

    // this.mass is undefined, I believe you intend to get the current cell's mass here.
    mass: this.cells[i].mass,

    velocity: {
        x: this.cells[i].velocity.x,
        y: this.cells[i].velocity.y
    },
    hue: this.cells[i].hue
});

参见 jsfiddle , reverse ver.