浅谈Javascript中对象的克隆

对象的浅拷贝

<script>
        // 创建一个等待克隆的对象
        let obj = {
            name:'jiangwen',
            arr : [1,2,3,4],
            say : function () {
                console.log(this.name)
            },
            myobj : {
                age : 18,
                arr2 : [4,5,6]
            }
        }

        // 浅克隆对象方法
        function clone (origin, target) {
            var target = target || {}
            for (let prop in origin) {
                if(origin.hasOwnProperty(prop)){
                    target[prop] = origin[prop]
                }
            }
            return target
        }
        let obj1 = deepClone(obj)
    </script>

对象的深拷贝

<script>
        // 创建一个等待克隆的对象
        let obj = {
            name:'jiangwen',
            arr : [1,2,3,4],
            say : function () {
                console.log(this.name)
            },
            myobj : {
                age : 18,
                arr2 : [4,5,6]
            }
        }
        // 深克隆对象方法
            // 1.判断是否原始值
            // 2.判断是数组还是对象
            // 3.建立相应的数组或对象
        function deepClone (origin, target) {
            var target = target || {},
                isArr = '[object Array]',
                toStr= Object.prototype.toString;

            for (let prop in origin) {
                if (origin.hasOwnProperty(prop)) {
                    if (typeof(origin[prop]) !=='null' && typeof(origin[prop]) == 'object') {  // 判断是否为对象类型
                        if (toStr.call(origin[prop]) == isArr) {  // 判断是不是数组类型
                            target[prop] = [] // 执行数组类型方法
                        }else{ 
                            target[prop] = {} // 执行对象类型方法
                        }
                        deepClone(origin[prop], target[prop]) // 递归再一次进入判断是不是原始类型
                    } else {
                        target[prop] = origin[prop]  // 原始类型直接赋值 （递归出口）
                    }
                }
            }
            return target
        }
        let obj1 = deepClone(obj)
    </script>