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

忘是亡心i 2022-11-27 06:49 230阅读 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 条评论，230人围观）

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

相关阅读

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

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

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

相关深拷贝浅拷贝

深拷贝浅拷贝深拷贝和浅拷贝的区别 1.浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 2.深拷贝：创建一个新的

柔光的暖阳◎/ 2022年12月26日 11:20/ 0 赞/ 224 阅读

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

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

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

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

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

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

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

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

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

相关深拷贝/浅拷贝

一、值传递和引用传递在谈值传递和引用传递之前先了解下java数据类型有哪些 Java数据类型 java的数据类型有两大类，基本类型和对象类型。相应的，变量也有两

青旅半醒/ 2022年11月06日 05:49/ 0 赞/ 223 阅读

相关浅拷贝深拷贝

对深拷贝与浅拷贝的再次理解记得11年底找工作的时候，面试时曾经遇到有面试官问的对深拷贝与浅拷贝的理解，那时候自己回来查了资料，写了篇博客，感觉自己理解了，其实理解的不深

Bertha 。/ 2022年07月15日 00:28/ 0 赞/ 264 阅读

相关深拷贝，浅拷贝

浅拷贝：拷贝了最外围的对象本身，内部的元素都只是拷贝了一个引用而已。也就是，把对象复制一遍，但是该对象中引用的其他对象我不复制深拷贝：外围和内部元素都进行了拷贝对象本身，而

灰太狼/ 2022年05月25日 10:36/ 0 赞/ 298 阅读

相关 javaScript浅拷贝、深拷贝

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

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

相关深拷贝浅拷贝

![本文思维导图][format_png] 目录深拷贝和浅拷贝的区别实现浅拷贝的几种方法实现深拷贝的3种方法基本数据类型引用类型传值与传址 ---

缺乏、安全感/ 2022年02月12日 16:53/ 0 赞/ 403 阅读