深度克隆完全版

上一篇深度克隆我们简单实现了深度克隆。也大致明白了深度克隆的原理。
但是仍有很多不足与不完善的地方，在此感谢前端艾希同学提供的以下几点需要完善与优化的地方：

• 缺少symbol对象的clone处理
• 对象属性引用该对象，即对象的循环引用
• 一些比较特殊的对象，如Date、RegExp等
• for...in不可遍历不可枚举的属性（symbol）

由于要面对不同的对象(正则、数组、Date等)要采用不同的处理方式，我们需要实现一个对象类型判断函数。

        const getType = (obj)=> {
            //定义map容器，存放解析后的数据类型，这样可以根据需求很方便地进行扩展
            var map = {
                '[object Boolean]'  : 'boolean',
                '[object Number]'   : 'number',
                '[object String]'   : 'string',
                '[object Function]' : 'function',
                '[object Array]'    : 'array',
                '[object Date]'     : 'date',
                '[object RegExp]'   : 'regExp',
                '[object Undefined]': 'undefined',
                '[object Null]'     : 'null',
                '[object Object]'   : 'object',
                '[object Symbol]'   : 'symbol'
                //新增数据类型...
            };
            if(obj instanceof Element) {
                return 'element';
            }
            return map[Object.prototype.toString.call(obj)];
        }

我们需要通过正则的扩展了解到flags属性等等,因此我们需要实现一个提取flags的函数.

        const getRegExp = re => {
            var flags = '';
            if (re.global) flags += 'g';
            if (re.ignoreCase) flags += 'i';
            if (re.multiline) flags += 'm';
            return flags;
        };

我们有了这些函数准备后，可以来实现一个比较常用的，能满足大多数情况的深度克隆函数，代码如下：

        const deepClone = sourceObj => {
            // 维护两个储存循环引用的数组
            const sourceObjArr = [];
            const targetObjArr = [];

            const clone = sourceObj => {

                let targetObj, proto;

                const type = getType(sourceObj);
                //判断数据类型
                switch(type){
                    case 'boolean':
                    case 'number':
                    case 'string':
                    case 'null':
                    case 'undefined':
                    case 'function'||'object':{
                        return sourceObj;
                        break;
                    }
                    case 'symbol':{
                        return Symbol(Symbol.keyFor(sourceObj).toString());
                        break;
                    }
                    case 'array':{
                        targetObj = [];
                        break;
                    }
                    case 'regExp':{
                        targetObj = new RegExp(sourceObj.source, getRegExp(sourceObj));
                        if (sourceObj.lastIndex) targetObj.lastIndex = sourceObj.lastIndex;
                        break;
                    }
                    case 'date':{
                        targetObj = new Date(sourceObj.getTime());
                        break;
                    }
                    default:{
                        //处理对象原型
                        //ES2017 引入了Object.getOwnPropertyDescriptors方法，返回指定对象所有自身属性（非继承属性）的描述对象
                        proto = Object.getPrototypeOf(sourceObj) || Object.getOwnPropertyDescriptors(sourceObj);
                        // 利用Object.create切断原型链
                        targetObj = Object.create(proto);
                        break;
                    }
                }

                // 处理循环引用
                const index = sourceObjArr.indexOf(sourceObj);
                if (index != -1) {// 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
                    return targetObjArr[index];
                }

                sourceObjArr.push(sourceObj);
                targetObjArr.push(targetObj);

                for (let i in sourceObj) {// 递归
                    targetObj[i] = clone(sourceObj[i]);
                }

                return targetObj;
            };


            return clone(sourceObj);
        }

这样，我们就简单实现了深度克隆。
我们来测试下：

        function person(pname) {
            this.name = pname;
        }

        const Messi = new person('Messi');

        function say() {
            console.log('hi');
        };

        let symbol = {
            [Symbol()]: 123
        }

        const sourceObj = {
            a: say,
            b: new Array(1),
            c: new RegExp('ab+c', 'i'),
            d: Messi,
            e: symbol
        };

        const targetObj = deepClone(sourceObj);

        console.log(targetObj.a, sourceObj.a); //[Function: say] [Function: say]
        console.log(targetObj.b[0], sourceObj.b[0]); // undefined undefined
        console.log(targetObj.c, sourceObj.c); // /ab+c/i /ab+c/i
        console.log(targetObj.d.constructor, sourceObj.d.constructor); // [Function: person][Function: person]
        console.log(targetObj.e,sourceObj.e);

当然,我们这个深克隆还不算完美,例如Buffer对象、Promise、Set、Map可能都需要我们做特殊处理。
ES6:
Map、Set、WeakMap、WeakSet、ArrayBuffer对象、TypedArray视图和DataView视图、Float32Array、Float64Array、Int8Array...
总之，JS中的数据类型是非常复杂的，要想完全实现一个完美的深度克隆，笔者力有不逮。一般在企业开发中，都是根据具体需求来实现一个深度克隆，用的最多的是JOSN方式：

let obj2 = JSON.parse(JSON.stringify(obj))

因为它虽然有缺陷，但是足够精简。如果我们确实需要copy各种复杂数据类型的话，这里笔者建议可以用lodash的深克隆实现。
下节我们再一起了解下immer取代深克隆的原理与方法。

参考链接：
https://juejin.im/post/5abb55ee6fb9a028e33b7e0a
https://github.com/Alvin-Liu/Blog/issues/9
https://juejin.im/post/5ae19b07518825673123ea25