js浅度克隆 与 深度克隆

2020-01-13  本文已影响0人  ticktackkk

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

var obj = {
        name : 'abc',
        age : 18,
        sex : 'male'
    }
    var obj1 = {}


    function clone(origin,target){//原始值,目标值
    var target = target || {};//防止用户不传target ,我自己建立一个空对象
        for( var prop in origin){
            target[prop] = origin[prop];
        }
        return target;//然后返回这个对象
    }
    clone(obj,obj1);

深层克隆
深层克隆:克隆出来的对象和原来的对象是相互独立的,互不影响。也就是对新对象的修改都不会反映到原对象中。
1.首先来讲解一下深度克隆的思路:
2.遍历(for var prop in origin)
3.判断是原始值还是引用值,判断方法用typeof()
4.如果是引用值,则继续判断是数组还是对象,判断方法instanceof、toString、constructor
5.建立相应的数组或对象
6.递归

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



        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(obj,obj1);
        console.log(obj,obj1);

        targetObj['card'][0] = 'zhangsan';
        console.log(obj,obj1);
上一篇 下一篇

猜你喜欢

热点阅读