浅谈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 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2152
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2060
来自专栏魂祭心

原 canvas绘制clock

4084
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645

扫码关注云+社区