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

Question

正在尝试复制 Agar's splitting function but when I call it, the maximum call stack size is exceeded. (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++)

它会在每次迭代中得到最新的 length of cell，当你往里面放东西的时候，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.

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

Maximum call stack size exceeded when split

html

javascript

stack-overflow

canvas