JavaScript的深拷貝和淺拷貝總結

深拷貝和淺拷貝

---

• 深拷貝：拷貝實例；淺拷貝：拷貝引用（原對象）。

• 說深拷貝和淺拷貝之前，我先去了解了下高程書上的JavaScript的變量類型：

  1. 基本類型：undefined、null、Boolean、number、string。變量直接按指存放在棧區內，可以直接訪問，所以我們平時把字符串、數字的值賦值給新變量，相當於把值完全復制過去，新變量的改變不會影響舊變量。

  2. 引用類型：存放在堆區的對象，變量在棧區中保存的是一個指針地址。

  3. 例子

        let a = 123;
        let b = a;
        b = 456;
        console.log(a);//123
        console.log(b);//456
     

• 深拷貝和淺拷貝圖解
  

• 淺拷貝實現方式

1. 函數實現

    	function shallowClone (source){
    	    if(!source || typeof source != 'object'){
    	        throw new Error ('error');
    	    }
    	    var targetObj = source.constructor === Array ? [] : {};
    	    for(var keys in source) {
    	        if(source.hasOwnProperty(keys)){
    	            targetObj[keys] = source[keys];
    	        }
    	    }
    	    return targetObj；
    	}
   

2. 最簡單的淺拷貝：變量復制

    	let a = 123;
    	let b = a;
    	b = 456;
    	console.log(a);
    	console.log(b);
   

3. 通過es6新增的Object.assign來復制對象

    	let obj = { name: '程序狗', age:{child: 12} }
    	let copy = Object.assign({}, obj);
    	copy.name = '單身狗';
    	copy.age.child = 24;
    	console.log(obj);// { name: '程序狗', age:{child: 24} }
   

4. jquey中的$.extend({}, obj); Array.prototype.slice()和Array.prototype.concat()都會返回一個數組或者對象的淺拷貝。（看起來像深拷貝）

• 深拷貝實現

1. 函數實現

    	function cloneDeep(obj){
    	    if(typeof obj !== 'object' || Object.keys(obj).length === 0 ){
    	        return obj;
    	    }
    	    let resultData = {};
    	    return recurison(obj, resultData);
    	}
    	
    	function recurison(obj, data = {}){
    	    for(key in obj){
    	        if(typeof obj[key] == 'object' && Object.keys(obj[key].length > 0 )){
    	            data[key] = recurison(obj[key]);
    	        }else{
    	            data[key] = obj[key];
    	        }
    	    }
    	    return data;
    	}
    	
    	var o1 = {
    	    arr: [1, 2, 3],
    	    obj: {
    	        key: 'value'
    	    },
    	    func: function(){
    	        return 1;
    	    }
    	};
    	
    	var o3 = cloneDeep(o1);
    	console.log(o3 === o1);//false
    	console.log(o3.obj === 01.obj);//false
    	console.log(o3.func === o1.func);//true
   

2. JSON對象中的parse和stringify，JOSN對象中的stringify可以把一個js對象序列化為一個JSON字符串，parse可以把JSON字符串反序列化為一個js對象，通過這兩個方法，也可以實現對象的深復制。