[記錄] JavaScript 中的深淺拷貝(複製)

標籤：end   func   div   type   出現   java   targe   方法   iframe   

淺拷貝和深拷貝針對的是Object、Array這樣複雜的參考型別資料
簡單說：淺拷貝只複製一層的屬性，而深拷貝則遞迴複製所有層級的屬性

一、淺拷貝

1 function clone(origin, target) {2     var result = target || {};3     for ( var prop in origin ){4         target[prop] = origin[prop];5     } 6     return result;7 }

如果對象的屬性值是數組或對象，實際上，儲存的值是一個記憶體位址；
未經處理資料和拷貝的資料指向的是同一個地址，可能別篡改。

二、深拷貝
思路：
遍曆對象 for (var prop in obj)
1. 判斷是不是原始值 typeof() object
2. 判斷是數組還是對象 instanceof constructor toString(在iframe父子範圍中依舊正確)
3. 建立相應的數組或對象 然後遞迴

 1 function deepClone(origin, target) { 2     var target = target || {}, 3         toStr = Object.prototype.toString, 4         arrStr = "[object Array]"; 5     for(var prop in origin) { 6         // 判斷對象是否包含特定的自身屬性 7         if(origin.hasOwnProperty(prop)) { 8             // 排除null這個特殊的object並且是物件類型的參考型別資料 9             if(origin[prop] !== null && typeof(origin[prop]) == ‘object‘){10                 target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {};11                 deepClone(origin[prop], target[prop]);12             }else{13                 // 拷貝基本類型資料14                 target[prop] = origin[prop];15             }16         }17     }18     return target;19 }

深拷貝不僅將原對象的基本類型資料拷貝，而且將原對象上的參考型別資料採用遞迴的方式拷貝到新的對象上。這樣就不會出現參考型別資料指向同一對象的問題。

jQuery提供了 $.extend() 深淺拷貝方法
淺拷貝：$.extend({}, obj1, obj2);
深拷貝：$.extend(true, obj1, obj2); 

[記錄] JavaScript 中的深淺拷貝(複製)