一文帶你了解JavaScript基礎(chǔ)之深拷貝和淺拷貝
拷貝（又名克隆，復(fù)制等），但是又分深拷貝和錢拷貝。
其實這個問題有時候想通了就很簡單，如果想不通可能會有點繞，不過其難度比閉包等好理解的多。
為什么又這個概念的存在呢？先舉一個例子。
var person={
name:"張三",
age:22
}
var person1=person;
console.log(person);
console.log(person1);
似乎可以被拷貝下來了，但是如果你操作person1的屬性值，這個時候person屬性值也會改變。
person1.name="李四"; console.log(person); console.log(person1);
其實這個很容易理解，那就是上面只是兩個對象的指針地址都是指向棧內(nèi)存的相同位置，前面講解引用數(shù)據(jù)類型的時候講解過何為引用數(shù)據(jù)類型。
補充 ：
對象.屬性 和對象[屬性]其實都是操作對象的屬性值，只是兩個不同的寫法而已。
那說明這種指針賦值的方式不是拷貝，那什么就是拷貝呢，那就是一個新的對象用用了一個對象的所有屬性，但彼此不受影響。
這樣的理解就明白了，拷貝的本質(zhì)就是將一個對象的屬性循環(huán)賦值給一個新的對象而已。
那有為什么分淺拷貝和深拷貝，說實話淺拷貝和深拷貝本質(zhì)上有什么什么區(qū)別嗎？
其實本質(zhì)沒有區(qū)別，最大的區(qū)別就是考慮的條件以及拷貝過程中的屬性類型不同而已。
老規(guī)矩先看代碼
淺拷貝
var person={
name:"張三",
age:22
}
var person1={};
for( key in person){
console.log(key);
person1[key]=person[key];
}
console.log(person);
console.log(person1);
person1.name="李四"; console.log(person); console.log(person1);
可以看出沒有彼此影響，但是又會涉及到新的問題，那就是person對象的屬性都是基本數(shù)據(jù)類型，如果是引用類型呢？比如數(shù)組，對象呢？
var person={
name:"張三",
age:22,
son:{
firstSon:"張大毛"
}
}
var person1={};
for( key in person){
console.log(key);
person1[key]=person[key];
}
console.log(person);
console.log(person1);
現(xiàn)在修改一下person1的送屬性。
person1.son={firstSon:"李大毛"};
console.log(person);
console.log(person1);
這樣看似乎也沒有彼此影響嗎？但是這個前面說過對象.屬性=這樣等于重寫賦值了person1.son的屬性，自然會斷開引用彼此的影響，畢竟兩個地址不一樣。但是如下修改呢？
person1.son.secondeSon="李大毛"; console.log(person); console.log(person1);
驚不驚喜，意不意外還是彼此影響了，這個時候就需要一種新的操作了那就是深拷貝，說白了就是將屬性值的有可能會為用引用類型。
補充：
如果person的原型上有屬性值，也會被person1取到，賦值給person1.這個前面說到過，那樣的話就會用到hasOwnProperty這個來判斷是否屬于自己的屬性值。
深拷貝
其實深拷貝和淺拷貝的區(qū)別，相信看到這里幾乎已經(jīng)明白了差不多了，就是考慮屬性值的類型而已。
// 上面補充了說了原型上的值也會被拷貝下來，為了方便直接用對象的原型鏈最后Object添加屬性。
Object.prototype.address="你猜";
var person={
name:"張三",
age:22,
son:{
firstSon:"張大毛"
}
}
strtype=Object.prototype.toString;
var person1={};
// 為了方便這個地方用遞歸方法
function coleFun(origin,target){
// 防止目標(biāo)對象本身有屬性
target=target||{}
for( key in origin){
if(origin.hasOwnProperty(key))
if(strtype.call(origin[key])=="[object Object]"){
target[key]={};
target[key]=coleFun(origin[key],target[key])
}else{
target[key]=origin[key];
}
}
return target;
}
person1=coleFun(person,person1)
console.log(person);
console.log(person1);
看結(jié)果沒有問題 現(xiàn)象修改一下屬性值試試
person1.son.secondeSon="李大毛"; console.log(person); console.log(person1);
現(xiàn)在看沒有問題。
所謂的深淺拷貝，說白了就是考慮屬性值是否會有引用類型，然后在進行拷貝而已。如果上面代碼沒有看懂的話，可能需要重溫一下引用數(shù)據(jù)和基本數(shù)據(jù)的區(qū)別，以及this指向，還有數(shù)據(jù)類型的判斷方法。這寫前面的文章都有聊過，可以翻看一下。
補充
有個朋友在評論區(qū)說如果如果用JavaScript中的JSON的方法進行拷貝數(shù)據(jù)，是深拷貝還是淺拷貝？
其實這個很容易證明的，那就是直接拷貝一個帶有引用數(shù)據(jù)類型的對象，然后判斷其是否會彼此影響即可。
首先看一下其含有的兩種方法以及作用：
| 方法 | 作用 |
|---|---|
JSON.parse() |
用于將一個JSON字符串轉(zhuǎn)換為 JavaScript 對象。 |
JSON.stringify() |
用于將 JavaScript 值轉(zhuǎn)換為JSON字符串。 |
然后代碼演示：
var person={
name:"張三",
age:22,
son:{
firstSon:"張大毛"
}
}
var str=JSON.stringify(person);
var person1=JSON.parse(str);
console.log(person);
console.log(person1);
拷貝的目前看結(jié)果至少沒有問題。
現(xiàn)在開始測試，是否相互影響
person1.son.secondeSon="李大毛"; console.log(person); console.log(person1);
可見沒有相互影響，其是通過JOSN進行拷貝其實是JavaScript一種常見的方式，畢竟比自己寫要方便的很多。其本質(zhì)就是將對象轉(zhuǎn)成一個JSON格式的字符串，而通過字符串再生成一個對象而已，所以說其也是一種深拷貝。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)圖片局部放大效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章介紹了ES6中函數(shù)的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
下面小編將通過實例由淺入深講解 prototype 的具體使用方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript中的運算符有很多，主要分為算術(shù)運算符，等同全同運算符，比較運算符，字符串運算符，邏輯運算符，賦值運算符等，它們都有一個自己的運算規(guī)則，在本文為大家介紹下2013-09-09
這篇文章主要介紹了JavaScript中的選擇器，下面和小編一起了看看吧2019-05-05
JavaScript中的toDateString()方法使用詳解
這篇文章主要介紹了JavaScript中的toDateString()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
前兩天寫程序時因為要用到j(luò)avascript中的window.event事件，于是就在網(wǎng)上搜了一下，終于找到一篇不錯的文章，來與大家分享下2012-12-12
這篇文章主要介紹了對JavaScript客戶端應(yīng)用編程的一些建議,主要針對MVC框架框架的一些相關(guān)使用問題,需要的朋友可以參考下2015-06-06
走出JavaScript初學(xué)困境—js初學(xué)
利用空閑幾天把《JavaScript權(quán)威指南》安靜的讀了一篇。真是一本好書呀！呵呵，這句話見的太多了。好在什么地方呢？聽我慢慢道來。2008-12-12
這篇文章主要介紹了如何理解JavaScript中的對象，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2021-11-11