对象的深拷贝和浅拷贝

深藏阁楼爱情的钟 2022-07-11 06:49 242阅读 0赞

## 1、深拷贝和浅拷贝 ##

简单数据类型数据的拷贝，是将一个变量的数据拷贝一份给了另一个变量，
    修改其中一个变量的值不会改变另一个变量的值，因为这连个变量在内存中的存储位置不一样；
    而复杂数据类型的拷贝需要多考虑一些，不同复杂类型数据的拷贝要考虑的内容不一样。
    这里以对象为例，浅谈对象的拷贝问题，它的拷贝涉及到地址和值，
    所以它的拷贝分为浅拷贝和深拷贝。
    浅拷贝是指将一个对象的地址拷贝一份给另外一个对象，
    二者共有相同的内存空间，
    只要其中一个对象的值发生改变，另一个对象的值也发生改变。
    深拷贝是将一个对象的值拷贝一份给另一个对象，
    另一个变量再重新开辟一块内存空间存放前一个对象的数据(不含地址)，这样
    一个对象的值改变不会改变另一个对象的值，因为它们各自享有各自的内存空间。

## 2、深拷贝的方式有以下几种，各自有各自的不足 ##

*  Object.assign() es6提供的方法

var obj = {
            name:'aaaaaaa',
            age:444,
            data:{
                sex:'femail',
                hobby:'swimming'
            }
        }
    
        var obj1 = Object.assign({},obj) //第一层是深拷贝，第二层只是简单的浅拷贝
        console.log(obj.data===obj1.data) //true //地址和值完全相同
    
        console.log('obj:',obj)
        console.log('obj1:',obj1)  // obj和obj1看起来数据一样
        console.log(obj === obj1)  //false
        //通过obj1改变的data的sex值，obj的也跟着改变
        obj1.name='bbbbbbbb'
        obj1.data.sex='man'   
        console.log(obj1) 
        console.log(obj)  
        // obj和obj1的name值不一样，但二者的data的sex都是man
        //说明 Object.assign() 方法 第一层是深拷贝，第二层只是简单的浅拷贝
     ```
    
    - JSON.stringify()  深拷贝，但是两个变量的数据结构有可能不一样
    ```js
        function Foo (){ 
            this.name = 'aaaaa'
        }
        Foo.prototype.sayHai =function () { 
            console.log('Hello Foo')
        }
        var obj = new Foo()
        obj.data = {
                sex:'femail',
                hobby:'swimming'
        }
    
        var obj2 = JSON.parse(JSON.stringify(obj))
        console.log('obj2:',obj2)  // 普通对象类型
        console.log('obj:',obj) // Foo 类型
        console.log(obj===obj2)  //false ,obj和obj2的地址不一样，值一样
        console.log(obj.data===obj2.data) 
        //false obj.data和obj2.data 的地址不一样，值一样
        obj2.data.sex='man'
        console.log('obj2:',obj2)
        console.log('obj:',obj)  //改变obj2的data的sex值，不会改变obj的

*  jQuery的extend(true,obj1,obj2…)方法 obj2方法会拷贝到obj1上，但是对obj2的改变会影响到obj1
 *  自定义,数组和对象的深拷贝  
    ···js  
    //对象的深拷贝  
    function deepCopy(p, c) \{  
    var c = c || \{\};  
    for (var i in p) \{  
    if(! p.hasOwnProperty(i))\{  
    continue;  
    \}  
    if (typeof p\[i\] === ‘object’) \{  
    c\[i\] = (p\[i\].constructor === Array) ? \[\] : \{\};  
    deepCopy(p\[i\], c\[i\]);  
    \} else \{  
    c\[i\] = p\[i\];  
    \}  
    \}  
    return c;  
    \}  
    ···
 *  seamless-immutable 实现深拷贝，而且两个变量共享同一个数据结构，更多了解见github…