淺層複製及深層複製

之前有介紹到 Call by Value 、Reference & Sharing，傳參考時，會遇到的問題就是修改時會互相影響。
想要避免讓它互相影響，我們就要來了解一下淺層複製及深層複製。

範例物件:

var family={
    name: 'Bob',
    members:{
        mom: 'Betty',
        dad: 'Sean'
    }
}

淺層複製

方法: for in、JQuery.extend、ES6寫法
只能複製最外層，內層還是會以傳參考的方式(所以會互相影響)

for in

先定義一個新物件:

var newFamily={};
for (var key in family){
    newFamily[key] = family[key]
}

試著修改外層:

newFamily.name='Andy';
console.log(family, newFamily)

試著修改內層:

newFamily.member.mom='Keira';
console.log(family, newFamily)

內層還是會一起更改，這就是淺層複製。

JQuery.extend

JQuery.extend 是用來將多個物件合起來，並放到第一個物件:
$.extend(dest,src1,src2,src3...)將src合併，放到dest

var newResult = $.extend({},{name:'Tom',age: 20 },{name: 'Ted',sex: 'male'} )
console.log(newResult)//{name: 'Ted',age: 20, sex: 'male'}

以 後面 蓋 前面 的方式合併

Object.assign() (ES6寫法)

用來複製一個或多個物件自身所有可數的屬性到另一個目標物件。回傳的值為該目標物件。
語法: Object.assign(target, ...sources)

var newFamily = object.assign({},family)

深層複製

方法:將物件轉為字串，再轉回物件

var newFamily = JSON.parsse(JSON.stringify(family));

可以測試看看，會發現內層也可以以傳值的方式被路複製了! 主要是因為它一開始就先轉為字串，以傳值的方式複製。