1. 程式人生 > >[記錄] JavaScript 中的深淺拷貝(克隆)

[記錄] JavaScript 中的深淺拷貝(克隆)

ray 方式 pro 是否 span div ext 引用 針對

淺拷貝和深拷貝針對的是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 中的深淺拷貝(克隆)