js浅层克隆和深层克隆

js中的浅层克隆和深层克隆

浅层克隆：当克隆引用值时，两个对象会共用一个引用地址，造成相互的干扰，即我改，它也改。

深层克隆：克隆出来的对象和原来的对象是相互独立的，互不影响。也就是对新对象的修改都不会反映到原对象中。

首先来讲解一下深度克隆的思路：

1. 遍历（for var prop in origin）
2. 判断是原始值还是引用值，判断方法用typeof()
3. 如果是引用值，则继续判断是数组还是对象，判断方法instanceof、toString、constructor
4. 建立相应的数组或对象
5. 递归

看一下详细的实现过程:

       var originObj = {
            name: 'abc',
            age: 20,
            card: ['visa','master'],
            wife:{
                name: 'bcd',
                son:{
                    name: 'aaa'
                }
            }
        };
        var targetObj = {};


        <!--target克隆origin-->
        function deepClone(origin,target){
            var target = target || {};
            var toStr = Object.prototype.toString;
            var arrStr = '[object Array]';
            for(var prop in origin){
                //判断该属性是自身的还是原型链上的
                if (origin.hasOwnProperty(prop)){
                    //判断出是引用值并且该值不为null
                    if (typeof (origin[prop]) == 'object' && origin[prop] !== 'null'){
                        //判断该引用值是数组类型的，则创建一个新的空的数组
                        if (toStr.call(origin[prop]) == arrStr){
                            target[prop] = [];
                        }else{
                            target[prop] = {};
                        }
                        deepClone(origin[prop], target[prop]);  //递归
                    }
                    else{
                        //因为是原始值，所以直接赋值就可以
                        target[prop] = origin[prop];
                    }
                }
            }
            return target;
        }

        var targetObj = deepClone(originObj,targetObj);
        console.log(originObj,targetObj);

        targetObj['card'][0] = 'zhangsan';
        console.log(originObj,targetObj);