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中有深拷貝和淺拷貝這樣的區分，粗粗看了一遍。可是沒有更多的實際使用經驗因此理解也不是很深入，若是之後有了更深的看法的話到時候再來寫一篇。