js浅复制与深复制的原理

试想这样一种场景，自己编写了一个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()  // 结果为cobjA.b.c = function () {  console.log('d');}objB.b.d()  // 结果为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()  // 结果为cobjA.b.c = function () {  console.log('d');}objB.b.c()  // 结果仍旧为c

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