浅谈JS中对象的深拷贝和浅拷贝

浅拷贝和深拷贝的'深浅'主要针对的是对象的‘深度’,常见的对象都是'浅'的,也就是对象里的属性就是单个的属性,而'深'的对象是指一个对象的属性是另一个对象,也就是对象里面嵌套对象,就像嵌套函数一样。

为什么要使用深拷贝和浅拷贝呢?

如果现有var obj1 = {...}这个对象,想要复制对象obj1,一贯的做法就是obj2 = obj1,这时虽然obj2拥有了obj1的所有属性,但obj2却不是自由的,因为它的改动会影响到obj1obj1的改动也会影响到obj2,这不是我们所希望的,所以要用到深拷贝和浅拷贝。

深拷贝和浅拷贝就是为解决对象的直接赋值后依然'连接'的问题,也就是共用一个引用,一个改变会影响到另一个。下面是常见的浅拷贝:

var obj = {
        a:10,
        b:20
    };
    function copy(obj) {
         var newobj={};  
         for(arr in obj){
            newobj[arr]=obj[arr]
         }
         return newobj;
    }
    obj2 = copy(obj); //成功复制出obj
    console.log(obj2); Object {a: 10, b: 20}
    obj2.a = 5; //更改了obj2的a 
    console.log(obj2.a); //5
    console.log(obj.a); //10,obj2的改变不影响obj,说明拷贝后的对象和之前的对象不存在共用一个引用

Paste_Image.png

浅拷贝可以解决常见的现象,但倘若对象不是常见的那种呢?比如说对象里还有子对象,那么用浅拷贝就不够彻底,比如如下代码:

var obj = {
        a: 10,
        b: 20,
        omg: {
            name: 'xuguojun',
            sex: 'male'
        }
     } 
     function copy(obj){
        var newobj = {};
        for(arr in obj){
            newobj[arr] = obj[arr]
        }
        return newobj;
     }
     obj2 = copy(obj);
     console.log(obj2); //成功复制出obj
     obj2.omg.name = 'PDD'; //改变obj2.omg.name的值为'PDD'
     console.log(obj2.omg.name); 
     console.log(obj.omg.name); //obj.omg.name的值也随着改变

Paste_Image.png

上面代码中,拷贝完成后更改了obj2.omg.name,结果obj.omg.name也随之改变,说明omg依然存在共用同一个引用的现象,所以浅拷贝拷贝的并不彻底 。这时候深拷贝就该上场了,它能用递归的思想继续深挖,直到最底层为止。

下面就是深拷贝了:

var obj = {
        a: 10,
        b: 20,
        omg: {
            name: 'xuguojun',
            sex: 'male'
        }
     } 
     function deepcopy(obj){
        var newobj = {};
        for(arr in obj){
            if (typeof obj[arr]==='object' && obj[arr] !== null) {
                newobj[arr] = deepcopy(obj[arr]); //递归,核心代码
            } else {
                newobj[arr] = obj[arr];
            }
        }
        return newobj;
     }
     obj2 = deepcopy(obj);
     console.log(obj2); 
     obj2.omg.name = 'PDD'; 
     console.log(obj2.omg.name); 
     console.log(obj.omg.name);

Paste_Image.png

通过上述代码可看出深拷贝拷贝的非常彻底,做到真正意义上的杜绝共用一个引用的问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老九学堂

【超全】C语言小白最容易犯的17种错误,你中了几个?

C编译的程序对语法检查并不像其它高级语言那么严格,这就给编程大佬们留下了“灵活的余地”,但还是由于这个灵活给程序的调试带来了许多不便,尤其对刚刚接触C语言的人来...

3305
来自专栏鸿的学习笔记

python的函数

在python里的lambda表达式只能使用纯表达式,除非像pyspark那样重载了。

942
来自专栏从零开始学自动化测试

selenium+python自动化93-鼠标事件(ActionChains)源码详解

ActionChains简介 actionchains是selenium里面专门处理鼠标相关的操作如:鼠标移动,鼠标按钮操作,按键和上下文菜单(鼠标右键)交互。...

3215
来自专栏一“技”之长

标签之美二——文本标签 原

定义字体大小:size  例如<font size="4"></font>设置其中文字字号为4。

482
来自专栏landv

c语言_头文件

1413
来自专栏小白的技术客栈

Python之递归函数

Python之递归函数 好久没有更新内容了,也好久没有给大家打个招呼了,小白想死你们了。今天跟大家说说Python中的递归函数。 Python是支持递归函数的...

3346
来自专栏老司机的技术博客

宝宝都能学会的python编程教程11:定义函数

定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名、括号、括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句...

2745
来自专栏蓝天

C语言编程程序的内存如何布局

C语言程序在内存中各个段的组成   C语言程序连接过程中的特性和常见错误   C语言程序的运行方式   一:C语言程序的存储区域   由C语言代码(文本...

622
来自专栏吾爱乐享

java之学习正则定义与练习

1195
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

1639

扫码关注云+社区