javascript对象的浅拷贝、深拷贝和Object.assign方法浅析

对象的浅拷贝：

浅拷贝是对象共用一个内存地址，对象的变化相互影响。好比常见的赋值引用就是浅拷贝:

let srcObj = {'name': 'lilei', 'age': '20'};
let copyObj = srcObj;
copyObj.age = '22';
console.log('srcObj', srcObj);   // srcObj { name: 'lilei', age: '22' }
console.log('copyObj', copyObj);  // copyObj { name: 'lilei', age: '22' }

对象的深拷贝:

简单理解深拷贝是将对象放到一个新的内存中，两个对象的改变不会相互影响。

Object.assign()

MDN上这样介绍Object.assign()，'Object.assign() 方法用于将全部可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象'，好吧，并看不出是深拷贝仍是浅拷贝，咱们来测试一下

let srcObj = {'name': 'lilei', 'age': '20'};
let copyObj2 = Object.assign({}, srcObj, {'age': '21'});
copyObj2.age = '23';
console.log('srcObj', srcObj); //{ name: 'lilei', age: '22' }

看起来好像是深拷贝了，那其实这里let copyObj2 = Object.assign({}, srcObj, {'age': '21'}); 咱们把srcObj 给了一个新的空对象。一样目标对象为 {}，咱们再来测试下:

srcObj = {'name': '明', grade: {'chi': '50', 'eng': '50'} };
copyObj2 = Object.assign({}, srcObj);
copyObj2.name = '红';
copyObj2.grade.chi = '60';
console.log('新 objec srcObj', srcObj);  // { name: '明', grade: { chi: '60', eng: '50' } }

从例子中能够看出，改变复制对象的name 和 grade.chi ，源对象的name没有变化，可是grade.chi却被改变了。所以咱们能够看出Object.assign()拷贝的只是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。
也就是说，对于Object.assign()而言, 若是对象的属性值为简单类型（string， number），经过Object.assign({},srcObj);获得的新对象为‘深拷贝’；若是属性值为对象或其它引用类型，那对于这个对象而言实际上是浅拷贝的。这是Object.assign()特别值得注意的地方。
多说一句，Object.assign({}, src1, src2); 对于scr1和src2之间相同的属性是直接覆盖的，若是属性值为对象，是不会对对象之间的属性进行合并的。

深拷贝的实现

有不少第三方库实现了对象的深拷贝，好比常见的 Jquery 和 underscore ，比较将来的 lodash，实现源码还没仔细分析，分析以后再来补充。
不过，若是你没有引入这些库，对于深拷贝还有一个简单的方法实现

JSON.parse() 和 JSON.stringify()

JSON.parse() 和 JSON.stringify() 算是对 深拷贝的一个无脑实现，看例子:

srcObj = {'name': '明', grade: {'chi': '50', 'eng': '50'} };
// copyObj2 = Object.assign({}, srcObj);
copyObj2 = JSON.parse(JSON.stringify(srcObj));
copyObj2.name = '红';
copyObj2.grade.chi = '60';
console.log('JSON srcObj', srcObj); // { name: '明', grade: { chi: '50', eng: '50' } }

能够看到改变copyObj2并无改变原始对象，实现了基本的深拷贝。
可是用JSON.parse()和JSON.stringify()会有一个问题。
JSON.parse()和JSON.stringify()能正确处理的对象只有Number、String、Array等可以被json表示的数据结构，所以函数这种不能被json表示的类型将不能被正确处理。好比

srcObj = {'name': '明', grade: {'chi': '50', 'eng': '50'},
    'hello': function() {console.log('hello')}};
// copyObj2 = Object.assign({}, srcObj);
copyObj2 = JSON.parse(JSON.stringify(srcObj));
copyObj2.name = '红';
copyObj2.grade.chi = '60';
console.log('JSON srcObj', copyObj2); //{ name: '红', grade: { chi: '60', eng: '50' } }

能够看出，通过转换以后，function丢失了，所以JSON.parse()和JSON.stringify()仍是须要谨慎使用。

后续再补充深拷贝实现思想。。。。

数组的深拷贝和浅拷贝

最后在补充一点数组的深拷贝和浅拷贝，同对象同样数组的浅拷贝也是改变其中一个会相互影响，好比:

let srcArr = [1, 2, 3];
let copyArr = srcArr;
copyArr[0] = '0';
console.log('srcArr', srcArr); // ['0', 2, 3]

可是数组的深拷贝方法要相对简单一些能够理解为数组方法中那些会改变原数组的方法，好比

• concat
• slice
• es6 的Array.from