解析js对象的浅复制与深复制原理

wenyiweb 发布于2019-08-21 15:12 / 1223人阅读

摘要：浅复制假设有两个对象现在想把对象的值复制给，由于对象的两个值都是原始类型，用浅复制即可。深复制简单来说深复制就是当遇到值是对象类型的时候就再运行一遍复制。

试想这样一种场景，自己编写了一个js插件，调用插件时参数是以对象的形式传入的，插件也有自己的默认值，当运行的时候就涉及到传入参数和默认值的合并，即用到对象的深复制和浅复制。

浅复制

假设有两个对象

var objA = {
  a: "aa",
  b: "bb"
};
var objB = {};

现在想把对象A的值复制给B，由于对象A的两个值都是原始类型，用浅复制即可。

function copy(sub, sup) {
  for (var key in sup) {
    sub[key] = sup[key];
  }
}
copy(objB, objA);

但是，假如对象A的其中一个值是引用类型。

var objA = {
  a: "aa",
  b: {
    c: function () {
      console.log("c");
    }
  }
};
var objB = {};
copy(objB, objA);
objB.b.c()  // 结果为c

运行复制的函数时也可以复制成功，但是存在着一个潜在的风险，即当修改对象A的b.c的值时，对象B也跟着改变了。

copy(objB, objA);
objB.b.c()  // 结果为c
objA.b.c = function () {
  console.log("d");
}
objB.b.c()  // 结果为d

虽然我们修改的是objA的b.c的值，但是objB中的值也跟着改变了。要是在多人协同的大项目中，其中一个人修改了一个对象的值会导致其他人的值全部改变，这显然不是我们想要的结果，于是需要进行深复制。

深复制

简单来说深复制就是当遇到值是对象类型的时候就再运行一遍复制。

function deepCopy (sub, sup) {
  for (var key in sup) {
    if (typeof sup[key] === "object") {
      sub[key] = {};
      deepCopy (sub[key], sup[key]);
    } else {
      sub[key] = sup[key];
    } 
  }
}

运行深复制后，即使改变objA中b.c的值，也不会影响objB的值。

deepCopy(objB, objA);
objB.b.c()  // 结果为c
objA.b.c = function () {
  console.log("d");
}
objB.b.c()  // 结果仍旧为c

这就是深复制与浅复制的区别，其实在本质上是一样的，感兴趣的可以研究jQuery的$.extend()的源码。

GPU云服务器云服务器 python的浅复制 js数组对象深度复制主从复制原理 mysql主从复制原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88130.html

关于js的浅拷贝与深拷贝

摘要：原文地址浅拷贝和深拷贝只针对像这样的复杂对象的简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过来实现浅拷贝。原文地址：http://www.silenceboy.com/201... 浅拷贝和深拷贝只针对像Object, Array这样的复杂对象的.简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。浅拷贝通过 Object.ass...

summerpxy 2019-08-26 13:41 评论0 收藏0
JS引用类型数据的浅拷贝与深拷贝

摘要：拷贝到，属性均顺利拷贝。大辉小辉，小辉，大辉小辉，小辉，大辉但是，若修改的属性变为对象或数组时，那么对象之间就会发生关联。深拷贝不希望对象之间产生关联，那么这时候可以用到深拷贝。浅拷贝之前文章提到，在定义一个对象或数组时，变量存放的往往只是一个地址。当我们对堆内存中的对象复制时，如果属性是对象或数组时，这时候我们拷贝的只是一个栈内存的指针。因此b对象在访问该属性时，会根据指针寻找...

MangoGoing 2019-08-21 16:53 评论0 收藏0
JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过以下↓ 数据类型在开始了解浅拷贝与深拷贝之前，让我们先...

546669204 2019-08-26 18:27 评论0 收藏0
JavaScript中的浅拷贝与深拷贝

摘要：所以，深拷贝是对对象以及对象的所有子对象进行拷贝实现方式就是递归调用浅拷贝对于深拷贝的对象，改变源对象不会对得到的对象有影响。上一篇 JavaScript中的继承前言文章开始之前，让我们先思考一下这几个问题：为什么会有浅拷贝与深拷贝什么是浅拷贝与深拷贝如何实现浅拷贝与深拷贝好了，问题出来了，那么下面就让我们带着这几个问题去探究一下吧！如果文章中有出现纰漏、错误之处...

AZmake 2019-08-23 17:08 评论0 收藏0
关于JavaScript的浅拷贝和深拷贝

摘要：引用类型值引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。前言要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。js的基本类型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 评论0 收藏0