深拷贝

一.什么是深拷贝

引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

 

深拷贝和浅拷贝的区别

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

 深拷贝采用了在堆内存中申请新的空间来存储数据，这样每个可以避免指针悬挂。

 深拷贝：对于深拷贝，针对成员变量存在指针的情况，不仅仅是简单的指针赋值，而是重新分配内存空间。如下：

　　#include <stdio.h>
　　#include <string>
　　
　　class A
　　{
　　    public:
　　        A()      // 构造函数，p指向堆中分配的一空间
　　        {
　　            m_pdata = new char(100);
　　            printf("默认构造函数\n");
　　        }
　　
　　        A(const A& r)
　　        {
　　            m_pdata = new char(100);    // 为新对象重新动态分配空间
　　            memcpy(m_pdata, r.m_pdata, strlen(r.m_pdata));
　　            printf("copy构造函数\n");
　　        }
　　
　　        ~A()     // 析构函数，释放动态分配的空间
　　        {
　　            if(m_pdata != NULL)
　　            {
　　                delete m_pdata;
　　                printf("析构函数\n");
　　            }
　　        }
　　
　　    private:
　　        char *m_pdata;     // 一指针成员
　　};
　　
　　int main()
　　{
　　    A a;
　　    A b(a);   // 复制对象
　　    return 0;
　　}

二.为什么要进行深拷贝

   浅拷贝会出现什么问题呢？

假如有一个成员变量的指针，char *m_data;

其一，浅拷贝只是拷贝了指针，使得两个指针指向同一个地址，这样在对象块结束，调用函数析构的时，会造成同一份资源析构2次，即delete同一块内存2次，造成程序崩溃。

其二，浅拷贝使得obj.m_data和obj1.m_data指向同一块内存，任何一方的变动都会影响到另一方。

其三，在释放内存的时候，会造成obj1.m_data原有的内存没有被释放（这句话，刚开始我不太理解，如果没有走自定义的拷贝构造函数，申请内存空间，A obj1(obj);也不走默认构造函数，走的是默认的拷贝构造函数，何来分配空间直说，更不会造成obj1.m_data原有的内存没有被释放，这里刚开始我一直有疑问），造成内存泄露。

事实是这样的，当delete obj.m_data, obj.m_data内存被释放后，由于之前obj.m_data和obj1.m_data指向的是同一个内存空间，obj1.m_data所指的空间不能在被利用了，delete obj1.m_data也不会成功，一致已经无法操作该空间，所以导致内存泄露。
 

三.如何进行深拷贝

第一步：简单实现

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

根据上篇文章内容，我们可以写出简单浅拷贝代码如下。

function cloneShallow(source) {
    var target = {};
    for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
    return target;
}

// 测试用例
var a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    },
    a1: undefined,
    a2: null,
    a3: 123
}
var b = cloneShallow(a);

a.name = "高级前端进阶";
a.book.price = "55";

console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '55' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

上面代码是浅拷贝实现，只要稍微改动下，加上是否是对象的判断并在相应的位置使用递归就可以实现简单深拷贝。

function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === 'object') {
                target[key] = cloneDeep1(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep1(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' }, 
//   a1: undefined,
//   a2: {},
//   a3: 123
// }

一个简单的深拷贝就完成了，但是这个实现还存在很多问题。

• 1、没有对传入参数进行校验，传入 null 时应该返回 null 而不是 {}

• 2、对于对象的判断逻辑不严谨，因为 typeof null === 'object'

• 3、没有考虑数组的兼容

第二步：拷贝数组

简单的兼容数组的写法如下：

function cloneDeep2(source) {

    if (!isObject(source)) return source; // 非对象返回自身

    var target = Array.isArray(source) ? [] : {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep2(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

// 使用上面测试用例测试一下
var b = cloneDeep2(a);
console.log(b);
// { 
//   name: 'muyiy', 
//   book: { title: 'You Don\'t Know JS', price: '45' },
//   a1: undefined,
//   a2: null,
//   a3: 123
// }

第三步：循环引用

我们设置一个数组或者哈希表存储已拷贝过的对象，当检测到当前对象已存在于哈希表中时，取出该值并返回即可。

function cloneDeep3(source, hash = new WeakMap()) {

    if (!isObject(source)) return source; 
    if (hash.has(source)) return hash.get(source); // 新增代码，查哈希表

    var target = Array.isArray(source) ? [] : {};
    hash.set(source, target); // 新增代码，哈希表设值

    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (isObject(source[key])) {
                target[key] = cloneDeep3(source[key], hash); // 新增代码，传入哈希表
            } else {
                target[key] = source[key];
            }
        }
    }
    return target;
}

第四步：递归方法

上面几步使用的都是递归方法，但是有一个问题在于会爆栈

那应该如何解决呢？其实使用循环就可以了，代码如下：

function cloneDeep5(x) {
    const root = {};

    // 栈
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 深度优先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循环
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

 

 

手写深拷贝

/**
 * 深拷贝
 */

const obj1 = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a', 'b', 'c']
}

const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}