JS中把对象赋值给变量时出现的问题

问题

刚才碰到了一个这样的问题：有一个由对象组成的数组，把其中一个对象赋值给变量p，而后改变了p的属性，对应的原来数组中的对象的属性也会随之改变。

var arr = [{x:0, y:0}, {x:0, y:0}]
var p = arr[0]
p.x = 1
p.y = 2
console.log(arr) // [{x:1, y:2}, {x:0, y:0}]

探究

我一开始觉得这是数组的什么神奇特性，通过几番试验发现只有由对象组成的数组有这个问题，隐隐以为这是对象的某个特性，而后又试了下，果真如此！

var a = {x:0, y:0}
var p = a
p.x = 1
console.log(a) // {x:1, y:0}

把a赋值给变量p以后，改变p的某个属性，a中对应的属性也会随之改变。

缘由

简单地想了一下缘由，不知道正确不正确：
var p = a是让p指向了a所表明的对象。同理，var a = {x:0, y:0}是让a指向了{x:0, y:0}这样一个对象。因此实际上p和a指向的是同一个对象，修改其它们中任何一个都会使另外一个一同改变。

解决办法

那有没有让p改变以后a保持不变的办法呢？
有的！

var a = {x:0, y:0}
var p = {}
p.x = a.x
p.y = a.y

经过这种方式把a的属性一一对应地赋值给p，以后对p作出的任何修改都不会影响到a。可是这种方法很麻烦，特别是碰到属性不少的对象，那么能够写个函数来完成这个工做：

function cloneObj(obj) {
  var newObj = {}
  for(var prop in obj) {
    newObj[prop] = obj[prop]
  }
  return newObj
}

var a = {x:0}
var p = cloneObj(a)
p.x = 2
console.log(p) // {x:2}
console.log(a) // {x:0}

成功了！修改p的属性以后a的属性没有随之改变。

---

后来网上查了查，发现js中有深拷贝和浅拷贝这样的区分，粗粗看了一遍。可是没有更多的实际使用经验因此理解也不是很深入，若是之后有了更深的看法的话到时候再来写一篇。