对象的引用&浅拷贝&深拷贝

一.对象的引用

定义一个对象info，它有name属性，age属性

const info = {name:'why',age:'18'}

使用这个对象的name属性

 console.log(info.name)//输出结果为why

接下来对这个过程进行图解（这里引入几个概念地址，栈，堆，如果你学习过Java，C或者其它语言，这点就会很容易理解）

（个人理解：对象是{name:'hello',age:'18'}存储在堆里，info是对象名存储在栈里，对象名通过地址找到对应的对象数据）

接下上面的代码

const obj = info
console.log(obj.name)//输出结果为why

obj把info的地址值复制过来了，虽然看着是对象名变了，但是访问的时候，地址没有变，所以还是访问的一个堆

二.对象的浅拷贝

定义一个对象info，它有name属性，age属性

const info = {name:'why',age:'18'}

使用assign方法对info进行拷贝

const obj = Object.assign({}, info)

内容输出完全一致

console.log(obj.name)//输出结果为why
console.log(obj.age)//输出结果为18

对应图解如下

那么什么是浅拷贝呢？对info对象进行一下修改

const info = { name: "why", age: 18, friend: { name: "kobe" } };

再使用assign方法对info进行拷贝，并修改

const obj = Object.assign({}, info);
//修改info中的对象friend的name属性
info.friend.name = "james";

然后分别输出info和obj中对象friend的name属性

console.log(info.friend.name); //结果为james
console.log(obj.friend.name);  //结果为james

如下图解，这就是浅拷贝

（个人理解：assign是浅拷贝，只复制其属性，在这个过程中fridend对象的地址始终没有变，一直指向同一个堆）

三.对象的深拷贝

创建一个info对象

const info = {
           name: "why",
           age: 18,
           friend: { name: "kobe" },
         };

通过JSON转化，完成深拷贝

const obj = JSON.parse(JSON.stringify(info));

输出

info.friend.name = "james";
console.log(obj.friend.name);//结果为kobe
console.log(info.friend.name);//结果为james

四.拓展

使用第三组件库Lodash完成对象的浅拷贝和深拷贝

什么是Lodash?

（个人理解是，类似jQuery，是对JavaScript代码的封装，像防抖函数，节流函数，Lodash都有对其的封装，直接拿来就可以了）

Lodash网址

引入Lodash(CDN)

 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

浅拷贝

const info = { name: "why", age: 18, friend: { name: "kobe" } };
const obj = _.clone(info);

深拷贝

const info = { name: "why", age: 18, friend: { name: "kobe" } };
const obj  = _.cloneDeep(info)