字典对象与JavaScript引用疑问：为何复用同一model实例？

兄弟，这事儿的核心在于JavaScript中对象是按引用传递/赋值的，不是你以为的“复制整个对象”，我给你拆解清楚：

问题出在哪？ #

看你的这段代码：

var dataObjectA = {}; 
var model = { value: 0 } 
for(i = 0; i < 10; i++) { 
  dataObjectA[i] = model; 
  dataObjectA[i].value++; 
} 

当你执行var model = { value: 0 }时，JavaScript在内存里创建了一个对象，而变量model存储的不是这个对象本身，而是指向这个对象的内存地址（引用）。

接下来循环里的dataObjectA[i] = model，只是把这个引用地址复制给了dataObjectA[i]——也就是说，dataObjectA[0]、dataObjectA[1]……dataObjectA[9]，所有这些属性指向的都是内存里同一个对象。

所以你每次执行dataObjectA[i].value++，本质上都是在修改那个唯一的对象的value属性，循环跑10次后，这个对象的value就变成了10，自然所有dataObjectA[i]的value都是10。

怎么解决？ #

你写的第二个循环开头就找对方向了：dataObjectB[i] = { value: 0 }，每次循环都用{}创建一个全新的对象，每个dataObjectB[i]都指向不同的内存地址，操作它们就不会互相影响。

如果你的model结构比较复杂，不想每次手动写一遍，可以用浅拷贝来基于model创建新对象，比如：

var dataObjectA = {}; 
var model = { value: 0 } 
for(i = 0; i < 10; i++) { 
  // 用扩展运算符创建新对象，复制model的所有属性
  dataObjectA[i] = { ...model }; 
  // 或者用Object.assign：dataObjectA[i] = Object.assign({}, model);
  dataObjectA[i].value++; 
}

这样每个dataObjectA[i]都是独立的对象，修改各自的value就不会互相干扰了。

（如果model里有嵌套对象，浅拷贝可能不够，这时候需要深拷贝，但你的例子里是简单对象，浅拷贝完全够用）

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