修改数组中一个元素后所有元素同步更新的原因排查

我在制作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;

    // 修改其中一个数组元素的值
    rects[0].c[0] = 1;

    document.getElementById("txt3").innerHTML = "Values after value change";
    
    // 为什么所有数组元素的值都变了？
    document.getElementById("txt4").innerHTML = rects[0].c;
    document.getElementById("txt5").innerHTML = rects[1].c;
    
}

window.onload = start;

我改写了另一个简化示例，却没有复现这个问题：

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


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



// 打印数组中的第0和第1个对象
document.getElementById("txt1").innerHTML = my_objects[0].my_array;
document.getElementById("txt2").innerHTML = my_objects[1].my_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;

我排查后发现，第一个示例的循环中把变量放入数组时，创建的是该变量的引用而非副本，修改时实际改变的是引用指向的对象，所以所有引用该对象的元素都会同步变化。但为什么两个示例的表现不一样？

内容的提问来源于stack exchange，提问作者astuvan