JS中的深浅拷贝

JS中的深浅拷贝

首先要明确JS中的数据类型，大的种类可分为基本数据类型和对象类型。这两种数据类型在内存中的存储是不同的。其中基本数据类型保存在栈内存，而对象类型保存在堆内存中，但是对象类型的地址是写在栈内存中的。其原因在于保存在栈内存中必须是大小固定的数据，而引用类型的大小是不固定的。

两种数据类型在复制时：

对于基本类型的复制是在栈区中重新开辟新的内存来存放新的变量，新旧变量互不影响。

而对于对象类型的复制，仅用等号复制的话，复制的只是引用，指向的仍然是同一个地址中的同一个对象。

浅拷贝：只复制指向某个对象的指针，而不会开辟新内存，新旧对象依然共享同一块内存。

深拷贝：创造另一个一模一样的对象，新旧对象不共享内存，新旧对象互不影响。

浅拷贝：

举个例子：

var obj={

​ name : “a”,

​ age : 20,

​ addr : {

​ home : “beijing”

​ }

};

var obj1=obj;

obj1.addr.home=“tianjin”;

console.log(obj.addr.home); //“tianjin”

在这个例子中因为是浅拷贝，所以obj1和obj指向的是同一个内存地址中的同一个对象，所以通过obj1修改属性值时，原来的对象obj中的属性也发生了修改。

注意：展开运算符…实现的是浅拷贝。

上述情况使我们不希望看到的，那么则可以考虑使用深拷贝。

深拷贝：

1. 通常可以使用JSON.parse(JSON.stringify(object))来解决。

   但是有局限性！会忽略undefined；会忽略symbol；不能序列化函数；不能解决循环引用的对象！

2. 在对象中不包含函数的话，可以考虑使用MessageChannel。但是这个方法是异步的，可以处理undefined和循环引用对象。具体请查看MessageChannel使用方法。

3. 更多的是使用lodash函数库中包含的深拷贝函数_.cloneDeep。详情可参考lodash的官方文档。

本文仅为于个人学习总结，如有错误，敬请指出。