JavaScript對象之深度克隆介紹
也不知道從什么時候開始，前端圈冒出了個新詞：對象深度克隆?？雌饋砗孟窈芨叽笊系臉幼?，實際上并不新鮮，在我們的實際項目開發(fā)中，你可能早已用到，只不過由于漢字的博大精深，有些原本很簡單的事物被一些看似專業(yè)的詞匯稍加修飾，就變得神秘起來了。
首先為什么要將一個對象進行深克?。空堅试S我進行一個猜測：你有時一定會認(rèn)為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ī)范，它們分別負(fù)責(zé)將一個對象（包括數(shù)組對象）轉(zhuǎn)換成字符串，和還原，從而實現(xiàn)對象的深拷貝。那么對于低級瀏覽器（如IE），拷貝數(shù)組的話，可以用newobj.concat(obj)，而普通對象，就索性枚舉賦值好了。
相關(guān)文章
這篇文章主要介紹了JavaScript交換變量常用4種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用echarts實現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以了解一下2024-12-12
其實javascript本身是具有原生拖放功能的，但是由于兼容性問題，以及功能實現(xiàn)的方式，用的不是很廣泛。javascript動畫廣泛使用的還是模擬拖拽。本文將詳細(xì)介紹javascript的模擬拖拽，有需要的可以參考借鑒。2016-09-09
本文主要介紹了js實現(xiàn)拖拽效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
隨著web技術(shù)發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率。下面這篇文章主要給大家介紹了關(guān)于利用Javascript實現(xiàn)一套自定義事件機制的相關(guān)資料，需要的朋友可以參考下。2017-12-12
Firefox中beforeunload事件的實現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機會2012-05-05
window.event.keyCode兼容IE和Firefox實現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
Firefox下設(shè)為主頁的JavaScript代碼
在IE下，我們可以輕松使用以下代碼來實現(xiàn)設(shè)置主頁 但在firefox我們需要做的更多2008-09-09
靜態(tài)的動態(tài)續(xù)篇之來點XML...2006-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)移動端圖片滑塊驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09