javascript - 对象行为不被理解

Question

我使用 JavaScript 已经有一段时间了，但从未遇到过这个问题:

var objArr = [];
var obj = {
  id:null,
  name:''
}

//Type 1: Why This do not work
    //create an array of 5 object
    for(var i=0; i<3; i++){
        obj.id = i;
        console.log(obj);
       objArr.push(obj); //What is wrong here
        }

    console.log(JSON.stringify(objArr)); // Have 5 objects in the array, But if you see this object is display the last object 
//output : [{"id":2,"name":""},{"id":2,"name":""},{"id":2,"name":""}]


//Type 2: Why This Works and why the above object works
var objArr=[];
    //create an array of 5 object
    for(var i=0; i<3; i++){
        console.log(obj);
       objArr.push({"id":i, "name":''});
        }

    console.log(JSON.stringify(objArr)); 
//output : [{"id":0,"name":""},{"id":1,"name":""},{"id":2,"name":""}]

也许我没有理解这里的对象。您能告诉我为什么会出现这种行为吗？

我有一个 jsfiddle.net Fiddle

Answer 1

在第一个示例中，您有一个(只有一个)对象，obj。您正在创建一个包含 3 个(而不是 5 个)对象的数组，但数组中的每个位置都引用同一个对象。

当您设置obj.id时，您正在为唯一的对象更改它，该对象在数组中的每个位置都被引用。

在第二个示例中，您每次都会创建一个新对象:

{"id": i, "name":''}          // this creates a new object

所以它有效。