【基础知识】深拷贝和浅拷贝

相关知识点

变量的数据类型：基本类型和引用类型

1. 基本类型：简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。
2. 引用类型：由多个值（基本类型或引用类型）构成的对象：Object和Array

变量的存储方式：栈（stack）和堆（heap）

1. 栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的值和引用类型的地址
2. 堆：动态分配的内存，大小不定，也不会自动释放。里面存放引用类型的值。

基本类型的存储举例

let m = "testa";

    let n = m;
    //栈内会开辟一块新的内存给n
    //修改n不会对m造成影响
    //不过这也不是深拷贝，深拷贝针对引用类型

引用类型的存储举例

    let m = "[0,1,2,3,4,5,6]";

    let n = m;

    n[1] = 9;

    console.log(m[1]);//9

来个复杂点的 ·

    let hobby = ['reading','singing','travel'];
    let person = {
        age : 20,
        name: 'Lucy',
        hobby: hobby
    }

引用对象

    let person2 = person;  //哈哈哈，连浅拷贝都不是哦

如何深拷贝呢？

1. person2中的hobby应该在堆内有一块自己的内存
2. person2对象在堆内也应该有一块自己的内存
3. 若person2中的hobby在堆内无自己的内存，而person2有，则是浅拷贝（只拷贝了最外层的属性）

所以啥是深拷贝呢？

深拷贝不仅需要将原对象的各个属性逐个拷贝
而且原对象各个属性所包含的对象也需要依次采用深拷贝的方法递归拷贝到新对象上
只有这样对新对象的修改才不会影响到原对象。

提一下

Array.protype.concat/slice、Object.assign等都是浅拷贝

    let h = ['hello'];
    let hw = ['hello'].concat(['world'])
    console.log(h); //['hello']
    console.log(hw); //['hello', 'world'] 这里是没有改变原来的数组h
    //但如果数组元素是个对象呢
    
    let li = [{name:"lily", age:20}];
    let ps = li.concat([{name:"lucy", age:25}]);
    ps[0].age = 30;
    console.log(li[0].age); //30 原来的数组也收到影响了

学习链接

实现深拷贝的几种方法

js深克隆（考虑到类型检查等因素）

JavaScript深拷贝的一些坑