JavaScript深拷貝實現原理簡析

來源:互聯網
上載者:User

標籤:rip   htm   改變   代碼   bubuko   參考型別   property   動態   類型   

原文:http://www.cnblogs.com/xie-zhan/p/6020954.html

JavaScript實現繼承的時候,需要進行對象的拷貝;而為了不影響拷貝後的資料對原資料造成影響,也就是存在共用關係的時候,我們就需要進行深拷貝;

這裡就做一個簡單的分析其實現原理

先上代碼:

var obj1 = {    name : ‘Awen‘,    song : {        auther : ‘小明‘,        title : ‘廣州‘    },    hobby: [‘吃‘,‘吃吃‘,‘吃吃吃‘]};var obj2 = {};for (var k in obj1) {    obj2[k] = obj1[k];}console.log(obj2); //Object {name: "Awen", song: Object, hobby: Array[3]}obj2[‘hobby‘].push(‘喝‘);console.log(obj1); //Object {name: "Awen", song: Object, hobby: Array[4]}console.log(obj2); //Object {name: "Awen", song: Object, hobby: Array[4]}

得到結論:淺拷貝不能完成需求,對於屬性是對象的時候,只是進行簡單的地址拷貝,其參考關聯性也在;不符合我們的要求;

在來看下深拷貝:

function inCopy(obj1,obj2) {    var obj1 = obj1 || {};//容錯處理    for (var k in obj2) {         if(obj2.hasOwnProperty(k)){ //只拷貝執行個體屬性,不進行原型的拷貝            if(typeof obj2[k] == ‘object‘) { //參考型別的資料單獨處理                obj1[k] = Array.isArray(obj2[k])?[]:{};                inCopy(obj1[k],obj2[k]); //遞迴處理參考型別資料            }else{                obj1[k] = obj2[k]; //實值型別的資料直接進行拷貝            }        }    }}

//深拷貝 兩者之間改變互不影響

//1 拷貝後兩者之間不再存在共用關係

//2 拷貝之後資料類型不能發生改變,也就是需要判斷是數組的時候,需要進行單獨遞迴的遍曆

//3 在繼承的時候,我們通過原型屬性實現原型對象屬性的繼承,在進行深拷貝的時候,我們首先需要提出原型對象上的屬性;通過hasOwnProperty方法來進行篩選;

測試代碼及結果如下

var obj3 = {    name : ‘Awen‘,    song : {        auther : ‘小明‘,        title : ‘廣州‘    },    hobby : [‘吃‘,‘吃吃‘,‘吃吃吃‘]};var obj4 = {};inCopy(obj4,obj3);console.log(obj3); //Object {name: "Awen", song: Object, hobby: Array[3]}console.log(obj4); //Object {name: "Awen", song: Object, hobby: Array[3]}obj4.hobby.pop(); console.log(obj3); //Object {name: "Awen", song: Object, hobby: Array[3]}console.log(obj4); //Object {name: "Awen", song: Object, hobby: Array[2]}obj4.song.title = ‘北京‘;console.log(obj3);console.log(obj4);

obj4動態改變

3 拷貝後資料類型保持一致

 

資料類型未發生改變

JavaScript深拷貝實現原理簡析

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.