深拷贝与浅拷贝的区别？如何实现它们？

浅拷贝

指的是创建一个新数据，这个数据有着与原始数据的一份精确拷贝，如果原始数据是基本类型的数据，那么拷贝出来的数据就是原始数据的值，如果原始数据为引用数据类型的值，那么，拷贝的就是原始数据的内存地址，也就是说，浅拷贝只会拷贝一层数据，其他的引用数据类型的值，只会拷贝其内存地址，也就是会共享一个堆数据

实现:

function shallowClone(obj) {
    if(typeof obj == "object" && obj != null) {
        const targetObj = Array.ifArray(obj) ? [] : {}
        for(let prop in obj) {
            if(obj.hasOwnProperty(prop)) {
                targetObj[prop] = obj[prop]
            }
        }
        return targetObj
    } else {
        // 不是对象
        return obj
    }
}

常见的浅拷贝现象有:

Object.assign

Array.prototype.slice()

Array.prototype.concat()

拓展运算符

深拷贝

深拷贝需要重新开一个栈，因为我们不清楚拷贝的对象到底有多少层属性，所以就需要用到递归，如果原始数据本身就是基本类型的数据，直接取原始数据的值即可完成拷贝，如果原始数据是引用类型的数据，就需要通过递归一直遍历到最后一层属性为基本类型的数据，然后就能达到不会共用同一个栈内存而达到复制一个对象，此时  "preObj !== cloneObj" ,这就是深拷贝

实现:

function deepClone(obj, map = WeakMap()) {
    if (obj == null || obj == undefined) return obj
    if (obj instanceof Date) return new Date(obj)
    if (obj instanceof RegExp) return new RegExp(obj)
    // 基础类型不需要深拷贝
    if (typeof obj != "object" && obj != "function") return obj
    // 处理普通函数和箭头函数
    if (typeof obj === "function") return handleFunc(obj)
    if (map.get(obj)) return map.get(obj)
    let cloneObj = new obj.constructor()
    map.set(obj, cloneObj)
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(cloneObj[key], map)
        }
    }
    return cloneObj
}

常见的深拷贝有:

_.cloneDeep()              插件  lodash  中的一个深拷贝方法

jQuery.extend()

JSON.stringify()           该方法有缺陷，会忽略处理 undefined symbol  函数

手写循环实现

区别

只凭概念和实现手法是比较难看出区别多少的，所以我们来分析一下，为什么会有浅和深只分，首先，从起始需要拷贝的数据下手，如以下两种对象:

obj1 = {
    name: "abc",
    age: 18,
    address: "string",
    height: null,
    education: undefined
}

obj2 = {
    abc: {
        name: "abc",
        age: 18,
        body: {
            height: null,
            SHOULDER: 80
        }
    },
    bcd: {
        name: "bcd",
        age: 26,
        body: {
            height: 180,
            SHOULDER: 90
        }
    }
}

当 第一个对象 需要拷贝时，数据结构十分简单，创建另一个对象，依次的将该对象的属性复制一遍即可，但是，如果第二个对象需要拷贝时，如果还只是单纯的将对象内部属性循环复制一遍，虽然拷贝出来的对象依然可以访问拷贝过来的任意属性，但是，如果将对象内的某一个对象属性中的属性值修改，那么原始对象的中的属性也会发生改变，因为单纯的循环复制出来的对象，与原对象是共用一个栈内存的，说白了，两个对象是共用一组属性，因为拷贝的时候，只是拷贝了一层数据，对于存在对象属性的拷贝，只是做到了拷贝其对象属性的地址，并没有额外的创造新的对象属性，而这种就叫做浅拷贝；那么深拷贝需要怎么做？深拷贝就需要创建另一个新的栈内存，通过递归，将对象中所有的属性全部 “复制粘贴” 到新的栈内存中，也就是拷贝后的对象，这时候，旧对象与新对象虽然属性上完全一样，但是，这两个对象是完全不同的两个对象，只不过对象内部存储的属性值相等而言，而且内部的对象属性也不是指向统一个栈内存，也是两个不同的指向，这就是深拷贝，再用下图加深一下理解:

 

从上图发现，浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样

浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象

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