【js笔记】深拷贝和浅拷贝的区别？

深拷贝和浅拷贝的区别？

提示>>>>>从堆和栈的角度去解释。。
首先先说下他们的含义：假设B复制了A，当我们修改B的值的时候，假如这时A的值跟着一起改变了，那就是浅拷贝,假如A的值没有改变，那就是深拷贝。
那从堆和栈的角度要怎么去解释呢？ 我们先解释下堆和栈是什么？ 堆是堆内存（heep）的简称，栈是栈内存（stack）的简称。

• 我们先要知道js总共有两种数据类型，一种是基本数据类型：number、string、null、undefined、boolean一种是引用类型的数据：如对象（Object）、数组（Array）、函数（Function）
• js的基本类型都是存储在栈当中，每种类型的数据占用的内存空间的大小是确定的，并且由系统自动分配和自动释放，这样带来的好处是，内存可以及时得到回收，相对于堆来说，更加容易去管理内存空间。
• js的引用数据类型的数据是存储于堆当中，准确来讲，应该是他们的数据地址存储于栈当中，当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址，然后再通过地址找到堆当中我们所需要的数据。

---

栈中的基本数据类型
var a=“bbb”

然后我们再改变a的值
a=111
在这里插入图片描述
由此我们可以看到，基本数据类型数值的改变就是在原本的内存当中修改，而不会新开辟一个地址

那接下来，我们将a赋值给c
var c=a

而当我们进行赋值的时候，是会开辟一个新的地址，不信的话我们改变下 c的值试试
c=666

大家可以用代码试一试

var a = "bbb";
console.log(a);  //bbb
a = 111;
console.log(a);//111
var c = a;
console.log(c); //111
c = 666;
console.log(c);//666
console.log(a);//111

---

堆中的引用数据类型
1.如下示例
var obj = new Object();

由此可知 obj 引用数据对象类型，在栈内存中是等于一个地址，然后再从这个地址去堆内存里面找到相对应的值
2.键值对
obj.name=“theshy”

3.引用数据类型的赋值
var b=obj

看到这里不知道大家懂了没，其实引用数据类型的赋值，就只是单纯地把堆内存里面的地址赋值，所以说 obj和b的堆内存地址是一样的，
假如我们修改了b里面的属性，那么obj对象里面的属性也会跟着改变，因为他们的内存地址是一样的。他们两个的命运相同。
不懂的可以敲以下代码找找感觉

var obj = new Object()
obj.name = 'theshy'
console.log(obj)//  {name: "theshy"} 
var b = obj
console.log(b)// {name: "theshy"} 
b.name = '我是666'
console.log(b)// {name: "我是666"} 
console.log(obj)// {name: "我是666"}

---

那究竟深拷贝和浅拷贝以及栈和堆有什么差别呢？
在深入理解的时候，我们先来一起看一段代码：

var obj = [4, 5, 6, { name: 'theshy', sex: '男' }];
  // 浅拷贝函数
  function copy(obj) {
    var copyObj = {};
    for (var key in obj) {
      copyObj[key] = obj[key];
    }
    return copyObj;
  }

  var obj1 = copy(obj);
  console.log(obj1);        // [4, 5, 6, { name: 'theshy', sex: '男' }]
  console.log(typeof obj1); // object

  // 改变_obj数组的第一项 , 发现对obj没有影响
  obj1[0] = 'change'
  console.log(obj);   // [4, 5, 6, { name: 'theshy', sex: '男' }]
  console.log(obj1);  // ['change', 5, 6, { name: 'theshy', sex: '男' }];


  // 改变_obj的name属性,obj的name也会改变
  obj1[3].name = 'mang';
  console.log(obj);   // [4, 5, 6, { name: 'theshy', sex: '男' }]
  console.log(obj1);  // ['change', 5, 6, { name: 'mang', sex: '男' }];

  // 只改变数组中的对象
  var test = obj[3]
  test.name = 'test'
  console.log(test)   // {name: "test", sex: "男"}
  console.log(obj)    // [4, 5, 6, { name: 'theshy', sex: '男' }]
  console.log(obj1)   // ['change', 5, 6, { name: 'mang', sex: '男' }];

所谓的浅拷贝，不过就是只复制第一层对象，但是当对象的属性是引用类型时，实质复制的是其引用地址，当引用值改变时，另一个也会跟着变化（就是
他们的堆内存当中使用的是相同的地址）命运相同
但是深拷贝的话，就是赋值的时候，新的对象的数据存放是直接开辟了一个新的地址，这个时候，当新对象发生改变的时候，旧的对象就不会跟着发生改变了。两个独立的个体
深拷贝可以通过递归的方式。（这个我们要自己尝试写一下）