JS如何实现深度克隆

由于JS原始值和引用值的数据存储方式不一样（堆和栈），导致对引用值进行修改的时候会导致两个相同储存地址的引用值一起发生改变：

let arr1 = [1,2,3];
let	arr2 = arr1;
arr1.push(4);
console.log(arr2)//[1,2,3,4]

这种情况只会发生在引用值身上，原始值不存在这种情况。
所以今天给大家介绍一个深层克隆引用值方式，采用了递归的方式，挖掘到需要克隆的数据的原始值之后对原始值进行克隆：

//定义需要进行克隆的对象
let obj = {
            name: 'xiaoming',
            age: 48,
            sex: 'male',
            card: ['visa', 'master'],
            family: {
                father: 'laoming',
                son: {
                    name: 'xiaoxiaoming',
                    age: 23,
                },
            }
        }
//封装深度克隆
function deepClone(origin, target) {
            var target = target || {},//设置target的默认值，不传值默认为空对象
                toStr = Object.prototype.toString,//原型链方法：判断数值类型
                arrStr = '[object Array]';

            for (var prop in origin) {
                if (origin.hasOwnProperty(prop)) {//判断对象下面是否有属性，没有属性的即为原始值

                    if (origin[prop] !== 'null' && typeof (origin[prop]) === 'object') {//判断需要被克隆的对象的属性是否为原始值
                        target[prop] = toStr.call(origin[prop]) === arrStr ? []:{};//不是原始值，将其转为数组或对象
                        deepClone(origin[prop], target[prop]);//如果不是原始值，继续调用自身，判断该属性的子属性是否为原始值
                    } else {
                        target[prop] = origin[prop]; //如果是原始值的话，将其复制给克隆对象
                    }
                }
            }
            return target
        }

这样就完成了深度克隆，深度克隆之后对克隆对象的增删改查都不会影响到他的克隆体！