[JavaScript]浅拷贝、深拷贝，封装一个对象深拷贝的方法

忘是亡心i 2022-11-27 06:49 259阅读 0赞

### 一、浅拷贝和深拷贝 ###

基本类型不会出现这个问题，只讨论引用类型

#### 1.浅拷贝： ####

**拷贝对象属性**  
问题：**一个改变，互相影响**

var arr=[1,2,3];
        var brr=arr;//拷贝的是数组arr 是引用类型
        arr[0]=4;
        console.log(brr);//[4, 2, 3]
       	
       	var obj1 = { 
            age: 18
        }
        var obj2=obj1;//拷贝的是对象obj1 是引用类型
        obj1.a=20;
        console.log(obj2);//{a: 20}

var obj1={ 
            age:18,
            arr:[1,2,3]
        }
        function copy(obj1){ 
            var obj2={ }
            for(var i in obj1){ 
                obj2[i]=obj1[i];//拷贝的数字age是基本类型，数组arr是引用类型
            }
            return obj2;
        }
        var obj2 = copy(obj1);
        obj1.age=18;
        obj1.arr[0]=666;
        obj2.arr[1]=777;
        console.log(obj1,obj2);

![在这里插入图片描述][20200813212330459.png_pic_center]

**可以看出基本类型age的改变没有影响  
引用类型(这里是数组)arr的改变导致两个对象中的arr都发生了改变  
这就是浅拷贝**

#### 2.深拷贝： ####

**拷贝原对象**

var obj1 = {  //原始对象
            age: 18,
            arr: [1, 2, 3]
        }
    
        var obj2 = { } //目标对象
    
        function copy(obj1, obj2) { 
    
            for (var k in obj1) { 
    
                if (obj1[k] instanceof Object) { 
                    //判断属性是否为引用类型，因为只有引用类型才要处理浅拷贝
                    obj2[k] = (obj1[k].constructor == Array) ? [] : { };
                    //如果obj1[k]是数组，则obj2[k]=[],否则obj2[k]={}
                    copy(obj1[k], obj2[k]) //递归调用
                } else {  //不是引用类型
                    obj2[k] = obj1[k]; //直接赋值
                }
    
            }
            return obj2;
    
        }
    
        var obj2 = copy(obj1, obj2);
    
        obj1.arr[0] = 'zhangsan';
    
        console.log(obj1, obj2)

![在这里插入图片描述][20200813213418699.png_pic_center]  
可以看到obj1中的引用类型arr改变并没有影响obj2

[20200813212330459.png_pic_center]: /images/20221124/b687de198e8c44ee9811398902762df5.png
[20200813213418699.png_pic_center]: /images/20221124/fb8bf27854f54f0bbe025e939e591878.png

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关深拷贝、浅拷贝的方法

目录浅拷贝深拷贝 -------------------- 深拷贝与浅拷贝概念：深浅拷贝出现的前提：应用类型的数据（对象和数组）深拷贝就是把

客官°小女子只卖身不卖艺/ 2024年03月31日 13:57/ 0 赞/ 86 阅读

相关 JavaScript深拷贝与浅拷贝

浅拷贝定义浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。基本类型拷贝的是值，而引用类型拷贝的是地址,且只能拷贝一层对象，假如存在

客官°小女子只卖身不卖艺/ 2023年01月06日 11:42/ 0 赞/ 147 阅读

相关深拷贝和浅拷贝的认识以及对象深拷贝的封装

故心故心故心故心小故冲啊 -------------------- 文章目录前言一、基本类型和引用类型二、深拷贝与浅拷贝 1

冷不防/ 2022年12月29日 06:51/ 0 赞/ 184 阅读

相关 JavaScript对象浅拷贝和深拷贝

JavaScript对象浅拷贝和深拷贝 1. 基本概念 2. 浅拷贝 3. 深拷贝 3.1 深拷贝JSON方法 3.2 深拷贝

男娘i/ 2022年12月26日 04:43/ 0 赞/ 203 阅读

相关 javascript 深拷贝与浅拷贝

javascript 深拷贝与浅拷贝深拷贝与浅拷贝赋值和深/浅拷贝的区别浅拷贝的实现方式 1.Object.assign(

我不是女神ヾ/ 2022年11月30日 12:56/ 0 赞/ 221 阅读

相关 JavaScript - 浅拷贝 / 深拷贝（函数封装）

浅拷贝 > 仅仅复制对象的引用，而不是对象本身。浅拷贝的实现方法比较简单，下面介绍 2 个，都可以直接使用。一、简单复制语句实现： function s

电玩女神/ 2022年11月29日 13:07/ 0 赞/ 195 阅读

相关 [JavaScript]浅拷贝、深拷贝，封装一个对象深拷贝的方法

一、浅拷贝和深拷贝基本类型不会出现这个问题，只讨论引用类型 1.浅拷贝：拷贝对象属性问题：一个改变，互相影响 var arr=[1,2,3];

忘是亡心i/ 2022年11月27日 06:49/ 0 赞/ 260 阅读

相关 javaScript浅拷贝、深拷贝

数据类型 js的数据类型有两种： 1.基本数据类型：数值、字符串、布尔、null、undefined （值类型）存放在栈中，所以复制基本数据类型的值是会新开一个栈

本是古典何须时尚/ 2022年03月07日 13:41/ 0 赞/ 339 阅读

相关【JavaScript】深拷贝与浅拷贝

如何区分深拷贝与浅拷贝？假设B复制了A，当修改A时，如果B也跟着改了，这就是浅拷贝，否则就是深拷贝。 ![在这里插入图片描述][2019071714264965.p

超、凢脫俗/ 2021年12月05日 19:17/ 0 赞/ 353 阅读

相关 javaScript浅拷贝和深拷贝

首先,克隆只针对对象、数组、函数等复杂数据。浅克隆: 就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，

妖狐艹你老母/ 2021年07月24日 19:36/ 0 赞/ 479 阅读