深拷贝和浅拷贝的区别

深拷贝和浅拷贝的区别

背景：
最近在用vue框架写页面，赋值给Vue.$data中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。
例如：

var b = {
    foo: 123
};
var vm = new Vue({
    el: "#demo",
    data: {
        a: b
    }
});

var b.foo = 456;
console.log(a.foo); //输出456

var a.foo = 789;
console.log(b.foo); //输出789

遇到问题之后在网上查原因才了解到js有深拷贝和浅拷贝的区别，提到这个，又不得不提js中的两种变量类型，即值类型（数值、布尔值、null、undefined）和引用类型（对象、数组、函数）。值类型保存于栈中，而引用类型保存在堆中。说到这，又得说下值类型和引用类型赋值时的不同，值类型赋值时会在内存中开辟一块新的空间，然后把赋过来的值保存于这块新开辟的空间中，引用类型赋值时也会开辟一块新的空间，不同的时新的空间保存的是赋值对象虽在的地址（即浅拷贝，也就是说赋值和被赋值对象引用的是同一个对象，所以改变其中任何一个对象时，另一个会随之改变）。所以深拷贝和浅拷贝概念只针对于引用类型，对于值类型来说没有意义。

但在编写程序时，往往需要被赋值的对象生成一个新的对象，而不是赋值对象的一个引用，这个时候我们就需要使用深拷贝了。下面是javascript|MDN上的一个例子，里面分别描述了浅拷贝和深拷贝及其的实现方法。

function test() {
  'use strict';
  // 浅拷贝
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // 深拷贝
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}