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()  // 结果为c
objA.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()  // 结果为c
objA.b.c = function () {
  console.log('d');
}
objB.b.c()  // 结果仍旧为c

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