浅谈JS中对象的深拷贝和浅拷贝

浅拷贝和深拷贝的'深浅'主要针对的是对象的‘深度’，常见的对象都是'浅'的，也就是对象里的属性就是单个的属性，而'深'的对象是指一个对象的属性是另一个对象，也就是对象里面嵌套对象，就像嵌套函数一样。

为什么要使用深拷贝和浅拷贝呢？

如果现有var obj1 = {...}这个对象，想要复制对象obj1，一贯的做法就是obj2 = obj1，这时虽然obj2拥有了obj1的所有属性，但obj2却不是自由的，因为它的改动会影响到obj1，obj1的改动也会影响到obj2，这不是我们所希望的，所以要用到深拷贝和浅拷贝。

深拷贝和浅拷贝就是为解决对象的直接赋值后依然'连接'的问题，也就是共用一个引用，一个改变会影响到另一个。下面是常见的浅拷贝：

var obj = {
        a:10,
        b:20
    };
    function copy(obj) {
         var newobj={};  
         for(arr in obj){
            newobj[arr]=obj[arr]
         }
         return newobj;
    }
    obj2 = copy(obj); //成功复制出obj
    console.log(obj2); Object {a: 10, b: 20}
    obj2.a = 5; //更改了obj2的a 
    console.log(obj2.a); //5
    console.log(obj.a); //10，obj2的改变不影响obj，说明拷贝后的对象和之前的对象不存在共用一个引用

Paste_Image.png

浅拷贝可以解决常见的现象，但倘若对象不是常见的那种呢？比如说对象里还有子对象，那么用浅拷贝就不够彻底，比如如下代码：

var obj = {
        a: 10,
        b: 20,
        omg: {
            name: 'xuguojun',
            sex: 'male'
        }
     } 
     function copy(obj){
        var newobj = {};
        for(arr in obj){
            newobj[arr] = obj[arr]
        }
        return newobj;
     }
     obj2 = copy(obj);
     console.log(obj2); //成功复制出obj
     obj2.omg.name = 'PDD'; //改变obj2.omg.name的值为'PDD'
     console.log(obj2.omg.name); 
     console.log(obj.omg.name); //obj.omg.name的值也随着改变

Paste_Image.png

上面代码中，拷贝完成后更改了obj2.omg.name,结果obj.omg.name也随之改变，说明omg依然存在共用同一个引用的现象，所以浅拷贝拷贝的并不彻底 。这时候深拷贝就该上场了，它能用递归的思想继续深挖，直到最底层为止。

下面就是深拷贝了：

var obj = {
        a: 10,
        b: 20,
        omg: {
            name: 'xuguojun',
            sex: 'male'
        }
     } 
     function deepcopy(obj){
        var newobj = {};
        for(arr in obj){
            if (typeof obj[arr]==='object' && obj[arr] !== null) {
                newobj[arr] = deepcopy(obj[arr]); //递归，核心代码
            } else {
                newobj[arr] = obj[arr];
            }
        }
        return newobj;
     }
     obj2 = deepcopy(obj);
     console.log(obj2); 
     obj2.omg.name = 'PDD'; 
     console.log(obj2.omg.name); 
     console.log(obj.omg.name);

Paste_Image.png

通过上述代码可看出深拷贝拷贝的非常彻底，做到真正意义上的杜绝共用一个引用的问题。