对象的深度克隆(使用递归)

闲来无事随便写点凑个数!

今天看到一个关于深度克隆的很简单粗暴的方法  :

JSON.parse(JSON.stringify(obj)) ;

说实话刚看到这个方法真是惊了一下,js这东西真是自由的飞翔,赶紧的打开浏览器测试一下。

但是测试的结果这个方法真是就是 “简单” ! 

这是原始对象:


    var sunObj1 = {
        name: 'sun',
        firend:{
            pople1:{
                name:'guo',
                age:18
            }
        },
        say:function(){
            console.log('holle world')
        },
        gf:['xiaoHong','xiaoFang']
    };

这是克隆后的对象的打印:

对象的深度克隆(使用递归)_第1张图片

可以发现 这个方法里少了点东西,原始值里的方法并没有克隆到新的对象里。这么看来粗暴的方法只能用在简单的东西上,想要更好的方法,那只能来细活了。

那么接下来 ,就写个细活,来个全方位的深度克隆:

function cloneSun(obj,target){

        var sunObj2 = target || {}; //继承传来的目标对象
        var toStr = Object.prototype.toString;
        for (var prop in obj){

            if (obj.hasOwnProperty(prop)){
                if (typeof obj[prop] !== 'object' && obj[prop] !== 'null'){
                    sunObj2[prop] = obj[prop];
                }else{
                    sunObj2[prop] = toStr.call(obj[prop]) === '[object Object]' ? {}:[];
                    cloneSun(obj[prop],sunObj2[prop]);
                }
            }
        }
        return sunObj2
    }

这里有几点需要注意:

1 、 判断对象的 typeof 是否是 object 并且 不为空(null);

2、 判断对象的属性是否是自身属性;

3、 判断对象的object.prototype.toString 的类型 是对象(obj )还是 数组(Arr);

这个些条件都判断对了之后,剩下的就是一一对应的复制就好了。

 

接下来看看这个细活怎么样 :

对象的深度克隆(使用递归)_第2张图片

可以看到克隆出来的新对象该有的东西都有,而且也顺利的说出了 hollow world !

——————————————————————————————

 

结束  (完成今天凑数)

你可能感兴趣的:(原生JS)