Максимальный размер стека вызовов превышен при сплите

Question

Попытка дублирования функции расщепления Agar, но когда я ее назову, максимальный размер стека вызовов превышен. (JSFiddle) [Примечание: не нажимайте на холст, потому что будет вызывать функцию разделения)

Это фрагмент кода, который вызывает переполнение:

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 в настоящий момент работает нормально. (не дает желаемого эффекта, но не вызывает переполнения, как текущий)

Почему это вызывает переполнение и как я могу предотвратить его и заставить функцию split работать правильно?

Answer 1

На этой линии в split:

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

Это будет получить новейшую length из 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.