js理解对象的引用-浅拷贝-深拷贝

标题1、引用拷贝

引用拷贝 简单的说就是通过 = 地址赋值。

 <!-- 1.对象的引用赋值 -->
  <script>
    // 对象是引用类型
    // const info = {name: "why", age: 18};
    // const obj = info;
    // info.name = "kobe";
    // console.log(obj.name);
  </script>

标题前提知识数据类型

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

1、基本数据类型的特点：数据直接存储在栈中。

2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

标题2、浅拷贝

浅拷贝可以创建一个对象的副本，把基本数据类型复制一份一共两份，但是如果是引用数据类型，只能复制地址。
补充一个小知识点 Object.assign() 也是浅拷贝只复制属性值。复制的对象其实也是引用地址

 <!-- 2.对象的浅拷贝  拷贝的是一个对象新对象 一共是两个对象 但是如果对象里面有对象则两个对象里面的指向依然是同一个引用地址-->
  <script>
    const info = {name: "why", age: 18, friend: {name: "kobe"}};
    // const obj = Object.assign({}, info);

    // 通过lodash实现浅拷贝
    const obj = _.clone(info);

    // info.name = "kobe";
    // console.log(obj.name);

    // info.friend.name = "james";
    // console.log(obj.friend.name);
  </script>

标题3、深拷贝

浅拷贝是无法把引用对象的值也拷贝的，只是拷贝了地址。

所以如果你要把地址对应的 值也拷贝一份，可以使用深拷贝，实现的原理就是 生成一个新对象和原来的对象就没有任何关系了
对象里面的对象也是一个属性值全部都是新的 不是引用地址
深拷贝把要复制的对象所引用的对象都复制了一遍

<!-- 3.对象的深拷贝 -->
  <script>
    // 通过lodash实现深拷贝
    // _.cloneDeep(info)

    // const info = {name: "why", age: 18, friend: {name: "kobe"}};
    // 会生成一个新对象和原来的对象就没有任何关系了 对象里面的对象也是一个属性值全部都是新的 不是引用地址 
    // const obj = JSON.parse(JSON.stringify(info));
    // info.friend.name = "james";
    // console.log(obj.friend.name);
  </script>

标题第三方库实现拷贝

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
// 通过lodash实现浅拷贝
    const obj = _.clone(info);
// 通过lodash实现深拷贝
     const obj= _.cloneDeep(info)

拷贝也可以称为克隆。

标题浅拷贝与深拷贝的区别

浅拷贝：拷贝原始类型的值，拷贝对象的引用。

深拷贝：拷贝原始类型的值，拷贝对象的所有内容（每个对象都拥有独立的对象引用）。