為什么要使用深度克??？
? ? 直接克隆的話，克隆類(lèi)中的數(shù)組只是獲得了原始類(lèi)中的數(shù)組指向。這樣的話，原始類(lèi)和克隆類(lèi)中的數(shù)組指向同一個(gè)空間，當(dāng)你需要操作克隆類(lèi)中的數(shù)組時(shí)，原始類(lèi)的數(shù)組也會(huì)跟著改變，這一點(diǎn)是相當(dāng)不可以的，也不符合邏輯。
在克隆之前，我們得先搞清楚，我們需要克隆些什么內(nèi)容。
? ? 以obj為例，我們進(jìn)行分析：
????????var?obj?=?{
????????????name?:?"嫖老師",
????????????age?: 18,
????????????hobbies?:?['basketball',?'JavaScript',?'Vue']?,
????????????family?:?{
????????????????name?:?"皮皮歡樂(lè)家庭",
????????????????parents?:?{
????????????????????father?:?"大皮皮",
????????????????????mother?:?"皮皮媽"
????????????????}
????????????}
????????}
? ? 我們可以直觀的看出來(lái)obj中有原始值和引用值。引用值為數(shù)組和對(duì)象，其中對(duì)象中，又有原始值name和引用值parents，parents中又有原始值father、mather。說(shuō)明，想要完成深度克隆，必須嵌套循環(huán)實(shí)現(xiàn)。我們需要一層一層的進(jìn)行克隆。
? ? 首先我們使用 for in 遍歷出obj中的所有元素，再加以判斷?；舅枷肟梢钥偨Y(jié)為5個(gè)過(guò)程：
? ? ? ? 1、遍歷對(duì)象 for (var prop in obj)
? ? ? ? 2、判斷是不是原始值 （使用typeof()判斷）
? ? ? ? 3、判斷是數(shù)組還是對(duì)象（使用toString()判斷）
? ? ? ? 4、建立響應(yīng)的數(shù)組或?qū)ο?/p>
? ? ? ? 5、遞歸
代碼演示：
?????function?deepClone(origin,?target)?{????//傳參?origin?被克隆的類(lèi)?，target?需要克隆的類(lèi)
????????????var?target?=?target?||?{};??//當(dāng)沒(méi)有傳target時(shí)，給創(chuàng)建個(gè)空類(lèi)
????????????toStr?=?Object.prototype.toString,??//把toString方法應(yīng)用出來(lái)
????????????arrStr?=?"[object?Array]"???//先設(shè)定一個(gè)array的toString返回值，方便比較
????????????for(var?prop?in?origin)?{???//用for?in?循環(huán)origin中所有的屬性
????????????????if(origin.hasOwnProperty(prop))?{?//判斷所得的屬性是否是自身的屬性，不能使用原型鏈上的屬性
????????????????????if(origin[prop] !== "null" && typeof(origin[prop])?==?'object')?{??//為turn時(shí)，該屬性為引用值。為false時(shí)，該元素為原始值，并且這個(gè)屬性不能為null，為null克隆就沒(méi)有意義
????????????????????????//走到這一步，就可以明確，只有數(shù)組和類(lèi)倆種情況，在進(jìn)行判斷?
????????????????????????if(toStr.call(origin[prop])?==?arrStr)?{????//判斷是不是數(shù)組
????????????????????????????target[prop]?=?[];??//是數(shù)組創(chuàng)建一個(gè)空數(shù)組
????????????????????????}else?{
????????????????????????????target[prop]?=?{};??//不是數(shù)組，就只能是類(lèi)了
????????????????????????}
????????????????????????//在一個(gè)類(lèi)中，也可能有原始值、數(shù)組、類(lèi)三種情況所有，我們需要再次對(duì)這個(gè)類(lèi)再進(jìn)行循環(huán)
????????????????????????//此時(shí)，循環(huán)的出口就是，當(dāng)該屬性為原始值，所有以當(dāng)前的prop再次調(diào)用循環(huán)，就可以實(shí)現(xiàn)循環(huán)遞歸
????????????????????????deepClone(origin[prop],target[prop]);???
????????????????????}else?{
????????????????????????target[prop]?=?origin[prop];????//直接賦值
????????????????????}
????????????????}
????????????}
????????}
運(yùn)行結(jié)果演示：
給obj1.hobbies數(shù)組push一個(gè)數(shù)據(jù)，看看obj中的hobbies是否有影響
? ? 深度克隆成功，倆個(gè)hobbies的空間指向并不是同一個(gè)，達(dá)成了我們的需求。
