解析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.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()的源码。

你可能感兴趣的:(javascript)