为什么当我更改其中一个数组项时，所有数组项都会更新

Question

我尝试过制作js动画，但是当我想更改对象内、数组内的数组项时遇到问题..

这是我的问题的简化演示：

function Rect(x, y, s, c) {
    this.x = x,
    this.y = y,
    this.s = s
    this.c = c;
}

function start() {
    let rects = [];
    let c = [0,0,0];
    let x = 0;

    for (i = 0; i < 10; i++) {
        rects.push(new Rect(x, 50, 100, c));

        x += 110;
    }

    document.getElementById("txt0").innerHTML = "Values before value change";
    document.getElementById("txt1").innerHTML = rects[0].c;
    document.getElementById("txt2").innerHTML = rects[1].c;

    // I change value in one of the array-elements
    rects[0].c[0] = 1;

    document.getElementById("txt3").innerHTML = "Values after value change";
    
    // Why is the value changed for all my array-elements?
    document.getElementById("txt4").innerHTML = rects[0].c;
    document.getElementById("txt5").innerHTML = rects[1].c;
    
}

window.onload = start;

• https://jsfiddle.net/ya4u0hjq/8/

我尝试重写一个通用的简化示例来重现问题，但后来我没有得到问题：

function My_constructor() {
  this.my_array = [0, 0, 0];
}


let my_objects = [];
for (i = 0; i < 10; i++) { my_objects.push(new My_constructor()); }



// Print object 0 and 1 from array
document.getElementById("txt1").innerHTML = my_objects[0].my_array;
document.getElementById("txt2").innerHTML = my_objects[1].my_array;

// Change parameter in one of the objects from the array
my_objects[0].my_array[0] = 1;

document.getElementById("txt3").innerHTML = my_objects[0].my_array;
document.getElementById("txt4").innerHTML = my_objects[1].my_array;

• https://jsfiddle.net/a34psqto/

有谁知道这是为什么吗？

Answer 1

您的 let 变量位于 for 循环之外。这意味着当您生成新类时，您将放入相同的内存引用。将 let c 和 let x 值放入 for 循环中，它将按照您的预期运行。

这是有效的，因为 let 是块作用域的，这意味着一旦开始 for 循环的新迭代，内存就会被释放。

祝你好运！