原文
大綱
前言
1垦细、對深拷貝和淺拷貝的初步認(rèn)識
2、深拷貝和淺拷貝的區(qū)別
3压恒、淺拷貝存在的缺陷
4头滔、深拷貝的實(shí)現(xiàn)方式
前言
對于很多初次接觸JavaScript的讀者來說怖亭，想要實(shí)現(xiàn)對象的拷貝/復(fù)制，就是單純的使用賦值語句(=)來實(shí)現(xiàn)需求坤检。但是，這樣的方式是不全面的期吓，這樣的方法對于簡單類型的數(shù)據(jù)來說是沒有問題的早歇，但是如果是對于像對象這樣的復(fù)雜的數(shù)據(jù)類型來說，這樣的實(shí)現(xiàn)方式有就會(huì)給你帶來意想不到的問題讨勤。那么箭跳，如果不能簡單的用賦值語句實(shí)現(xiàn)對象的拷貝(復(fù)制)，我們應(yīng)該用什么樣的方式呢潭千？這個(gè)谱姓，就是深拷貝和淺拷貝的意義所在了。
1刨晴、對深拷貝和淺拷貝的初步認(rèn)識
深拷貝和淺拷貝只針對像 Object, Array 這樣的復(fù)雜對象的屉来。簡單來說，淺拷貝只拷貝一層對象的屬性狈癞，而深拷貝則遞歸拷貝了所有層級茄靠。
對于字符串類型漂羊，淺拷貝是對值的復(fù)制醋旦，對于對象來說臀稚，淺拷貝是對對象地址的復(fù)制图筹，并沒有開辟新的棧裸扶，也就是復(fù)制的結(jié)果是兩個(gè)對象指向同一個(gè)地址钥飞，修改其中一個(gè)對象的屬性付翁，則另一個(gè)對象的屬性也會(huì)改變筛欢，而深拷貝則是開辟新的棧恢共，兩個(gè)對象對應(yīng)兩個(gè)不同的地址战秋，修改一個(gè)對象的屬性，不會(huì)改變另一個(gè)對象的屬性旁振。
2获询、深拷貝和淺拷貝的區(qū)別
雖然兩者都是對內(nèi)容的拷貝，但是拷貝的內(nèi)容的不同是區(qū)分兩者的關(guān)鍵拐袜，而這個(gè)不同主要體現(xiàn)在對Object和Array這樣的復(fù)雜對象吉嚣。最直接的原因是諸如字符串這樣簡單的類型的拷貝就是內(nèi)容的復(fù)制，并不會(huì)有別的什么深層次的東西蹬铺，但是對于Objcet和Array這樣復(fù)雜的類型尝哆，主要是由于對象的復(fù)制是基于對對象的地址的復(fù)制而不是整體內(nèi)容的復(fù)制（對象包含了key ,value）。
簡而言之：淺拷貝之后的對象實(shí)際上都是同一個(gè)對象甜攀，而深拷貝之后的對象都是除了內(nèi)容相同以外完全無關(guān)的對象秋泄。
3琐馆、淺拷貝存在的缺陷
通過一個(gè)實(shí)例來說明使用淺拷貝對對象進(jìn)行復(fù)制會(huì)導(dǎo)致哪些問題，從而正確認(rèn)識使用深拷貝和淺拷貝的重要意義恒序。
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
function shallowCopy(src) {
var dst = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
dst[prop] = src[prop];
}
}
return dst;
}
/*
導(dǎo)致的結(jié)果就是：
對shallowObj對象的更改也會(huì)影響到原對象obj瘦麸，即所謂的牽一發(fā)而動(dòng)全身。
*/
shallowObj.arr[1] = 5;
obj.arr[1] // = 5
4歧胁、深拷貝的實(shí)現(xiàn)方式
以下介紹兩種我平時(shí)收集到并且常用的深拷貝的實(shí)現(xiàn)方式滋饲，希望能對讀者有所幫助。
4.1喊巍、通過JSON解析解決
針對純 JSON 數(shù)據(jù)對象的深復(fù)制屠缭，使用 JSON 全局對象的 parse 和 stringify 方法來實(shí)現(xiàn)深復(fù)制也算是一個(gè)簡單討巧的方法。然而使用這種方法會(huì)有一些隱藏的坑崭参，它能正確處理的對象只有 Number, String, Boolean, Array, 扁平對象呵曹，即那些能夠被 json 直接表示的數(shù)據(jù)結(jié)構(gòu)。
var test = {
person: {
name: {
first: 'chen',
last: 'kk'
},
age: 12
},
interest: ['book', 'run', 'jump']
}
var result = JSON.parse(JSON.stringify(test))
result.interest.push('sing')
console.dir(test)//['book', 'run', 'jump']
console.dir(result)//friend: ['book', 'run', 'jump','sing']
4.2何暮、通過遞歸解析解決
想要獲得多層的數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)的深拷貝奄喂，不得不考慮使用迭代的方式。下列的方法將需要考慮深拷貝的對象郭卫、Array數(shù)據(jù)類型砍聊，并不斷的通過迭代判斷來對這兩種類型的數(shù)據(jù)進(jìn)行深拷貝。
var china = {
nation: '中國',
birthplaces: ['北京', '上海', '廣州'],
skincolr: 'yellow',
friends: ['sk', 'ls']
}
//深復(fù)制贰军，要想達(dá)到深復(fù)制就需要用遞歸
function deepCopy(o, c) {
var c = c || {}
for (var i in o) {
if (typeof o[i] === 'object') {
//要考慮深復(fù)制問題了
if (o[i].constructor === Array) {
//這是數(shù)組
c[i] = []
} else {
//這是對象
c[i] = {}
}
deepCopy(o[i], c[i])
} else {
c[i] = o[i]
}
}
return c
}
var result = {
name: 'result'
}
result = deepCopy(china, result)
console.dir(result)
