快捷導(dǎo)航

JavaScript對(duì)象之深度克隆介紹

更新時(shí)間：2014年12月08日 10:54:07 投稿：junjie

這篇文章主要介紹了JavaScript對(duì)象之深度克隆介紹,本文詳細(xì)的講解了什么是對(duì)象深度克隆,并給出了示例代碼,需要的朋友可以參考下

也不知道從什么時(shí)候開始，前端圈冒出了個(gè)新詞：對(duì)象深度克隆?？雌饋砗孟窈芨叽笊系臉幼?，實(shí)際上并不新鮮，在我們的實(shí)際項(xiàng)目開發(fā)中，你可能早已用到，只不過由于漢字的博大精深，有些原本很簡單的事物被一些看似專業(yè)的詞匯稍加修飾，就變得神秘起來了。

首先為什么要將一個(gè)對(duì)象進(jìn)行深克隆？請(qǐng)?jiān)试S我進(jìn)行一個(gè)猜測：你有時(shí)一定會(huì)認(rèn)為js的內(nèi)置對(duì)象document太長，那么你可能會(huì)這樣做：

復(fù)制代碼代碼如下:

var d = document;

d.by = function(id){

    return d.getElementById(id);

};

d.by('id').innerHTML = 'hello sentsin';

上述代碼對(duì)document.getElementById進(jìn)行了簡化，同時(shí)在原document對(duì)象中也增加了一個(gè)by的成員方法，你可以通過document.hasOwnProperty('by')返回的狀態(tài)值來驗(yàn)證你的判斷。再看下面一個(gè)例子。

復(fù)制代碼代碼如下:

var person = {name: '賢心', profession: '前端開發(fā)', place: '杭州'};

var newPerson = person;

newPerson.age = '24';

console.log(person);

//結(jié)果：{name: '賢心', profession: '前端開發(fā)', place: '杭州', age: 24}

由此可見，將一個(gè)對(duì)象通過簡單的傳遞給一個(gè)新的變量時(shí)，僅僅只是給該對(duì)象增添了一個(gè)別名。這意味著，通過對(duì)該別名的操作，原有對(duì)象鍵值會(huì)發(fā)生改變。但問題在于，有時(shí)我們希望newPerson完全獨(dú)立于person，彼此之間不存在同步關(guān)系，那么就需要生成一個(gè)副本，請(qǐng)看例子：

復(fù)制代碼代碼如下:

//測試
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//執(zhí)行深度克隆
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//對(duì)克隆后的新對(duì)象進(jìn)行成員刪除
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];

這便是所謂的對(duì)象克隆。不過有幾處需要解釋一下。代碼中的JSON對(duì)象及其成員方法stringify和parse屬于ECMAScript5規(guī)范，它們分別負(fù)責(zé)將一個(gè)對(duì)象（包括數(shù)組對(duì)象）轉(zhuǎn)換成字符串，和還原，從而實(shí)現(xiàn)對(duì)象的深拷貝。那么對(duì)于低級(jí)瀏覽器（如IE），拷貝數(shù)組的話，可以用newobj.concat(obj)，而普通對(duì)象，就索性枚舉賦值好了。

您可能感興趣的文章: