也不知道從什么時候開始，前端圈冒出了個新詞：對象深度克隆。看起來好像很高大上的樣子，實際上并不新鮮，在我們的實際項目開發(fā)中，你可能早已用到，只不過由于漢字的博大精深，有些原本很簡單的事物被一些看似專業(yè)的詞匯稍加修飾，就變得神秘起來了。
首先為什么要將一個對象進行深克隆？請允許我進行一個猜測：你有時一定會認為js的內(nèi)置對象document太長，那么你可能會這樣做：
var d = document;
d.by = function(id){
return d.getElementById(id);
};
d.by('id').innerHTML = 'hello sentsin';
上述代碼對document.getElementById進行了簡化，同時在原document對象中也增加了一個by的成員方法，你可以通過document.hasOwnProperty('by')返回的狀態(tài)值來驗證你的判斷。再看下面一個例子。
var person = {name: '賢心', profession: '前端開發(fā)', place: '杭州'};
var newPerson = person;
newPerson.age = '24';
console.log(person);
//結(jié)果：{name: '賢心', profession: '前端開發(fā)', place: '杭州', age: 24}
由此可見，將一個對象通過簡單的傳遞給一個新的變量時，僅僅只是給該對象增添了一個別名。這意味著，通過對該別名的操作，原有對象鍵值會發(fā)生改變。但問題在于，有時我們希望newPerson完全獨立于person，彼此之間不存在同步關(guān)系，那么就需要生成一個副本，請看例子：
var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj), //系列化對象
newobj = JSON.parse(str); //還原
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};
//測試
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//執(zhí)行深度克隆
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//對克隆后的新對象進行成員刪除
delete newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//結(jié)果： {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];
這便是所謂的對象克隆。不過有幾處需要解釋一下。代碼中的JSON對象及其成員方法stringify和parse屬于ECMAScript5規(guī)范，它們分別負責將一個對象（包括數(shù)組對象）轉(zhuǎn)換成字符串，和還原，從而實現(xiàn)對象的深拷貝。那么對于低級瀏覽器（如IE），拷貝數(shù)組的話，可以用newobj.concat(obj)，而普通對象，就索性枚舉賦值好了。
