js中的深,浅克隆

js中的深,浅拷贝


浅拷贝

浅拷贝是指对于基本数据类型而言,复制它的值;对引用类型的数据仅能复制到它的地址,并不能对地址内存放的值进行复制。

浅拷贝效果显示:
浅拷贝方法:

        function Clone(obj) {
            if (Object.prototype.toString.call(obj) === "[object Object]") {
                var newObj = {};
                for (var prop in obj) {
                    newObj[prop] = obj[prop];
                }

            }
            return newObj;
        }

浅拷贝对象:

        var obj = {
            a: 4,
            b: [1, 2, 3]
        }

操作变量:

        console.log(obj);
        var Newobj = Clone(obj);
        Newobj.b[2] = 5;
        console.log(Newobj);

此处我们更改了 Newobj里的b属性的下标为2的值结果为:
在这里插入图片描述
可以明显发现,我们输出的原obj对象的b属性的下标为2的值也发生了改变,发生这种现象的原因就是浅拷贝的地址复制,我们在更改新对象 Newobj的b属性时此处b属性保存的地址和原obj对象的b属性的地址相同,因此改变会影响原对象。

深拷贝

深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
简单理解可理解:为把原对象逐层展开拷贝,将原对象里的引用类型也逐层拷贝,因此不再是单纯的地址复制,而是把保存的内容完全复制。因此改变新对象时不再影响原对象。

代码如下(示例):

        function Clone(obj) {
            if (Array.isArray(obj)) {
                var arr = [];
                for (var i = 0; i < obj.length; i++) {
                    arr.push(Clone(obj[i]));
                }
                return arr;
            } else if (Object.prototype.toString.call(obj) === "[object Object]") {
                var newObj = {};
                for (var prop in obj) {
                    newObj[prop] = Clone(obj[prop]);

                }
                return newObj;
            } else {
                return obj;
            }
        }
        var obj = {
            a: 4,
            b: [1, 2, 3]
        }
        console.log(obj);
        var Newobj = Clone(obj);
        Newobj.b[2] = 5;
        console.log(Newobj);

此函数主要思路为当遇到拷贝内容为引用类型时则自身再次调用(即为递归函数),因此拷贝过程会一直进行到所有引用类型数据完全复制为止
结果如图:
在这里插入图片描述

总结

本文为本人自身的理解,若有异议和建议可以评论或私信联系我,感谢观看。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值