Js 对象的浅拷贝和深拷贝

一、以下的方式并不算浅拷贝

    var obj = {
        name: '张三',
        arr: [1,2,3]
    }

    function copy(obj){
        var Obj = obj;
        return Obj;
    }

    var obj1 = copy( obj );

    obj1.name = 'lisi';

    console.log( obj );    // name : 'lisi'
    console.log( copy( obj ) );   // name : 'lisi'

 上面的两个变量都是指向同一个地址。其实还是同一个对象。

 

二、浅拷贝

    var obj = {
        name: '张三',
        arr: [1,2,3]
    }

    function shadowCopy(obj1){

        var obj2 = {};

        for( var k in obj1 ){
            obj2[k] = obj1[k]; // 思路是把obj1的属性复制一份给obj2;
                               // 如果这个属性是对象的话，只是复制了指针.
                               // obj1.arr和obj2.arr都是只是同一个地址
        }

        return obj2;
        
    }

    var obj1 = shadowCopy( obj );

    obj1.name = 'lisi';
    obj.arr[0] = 111;

    console.log( obj );    // name : 'zhangsan', arr: [111,2,3]
    console.log( obj1 );   // name : 'lisi', arr: [111,2,3]

上面的思路，就是通过循环吧obj1的属性都复制给obj2；但是如果属性是对象或者是数组的话，属性的key指向的其实还是同一个对象。两个对象还有属性是共用内存的。这就是浅拷贝。

三、深拷贝（利用递归实现深拷贝）

    var obj = {
        name: '张三',
        arr: [1,2,3]
    }
    var Obj = {};

    function deepCopy(obj1, obj2){

        var obj2 = obj2 || {};
        
        for( var key in obj1 ){
            if( typeof obj1[key] == 'object' ){
                obj2[key] = ( obj1[key].constructor === Array ) ? [] : {};
                deepCopy( obj1[key], obj2[key]);
            } else{
                obj2[key] = obj1[key];
            }
        }
    
        return obj2;
        
    }

    var obj1 = deepCopy( obj, Obj );

    obj1.name = 'lisi';
    obj.arr[0] = 111;

    console.log( obj );    // name : 'zhangsan', arr: [1,2,3]
    console.log( obj1 );   // name : 'lisi', arr: [111,2,3]