首发地址
变量与内存的关系
在js中，内存空间一般分为栈(stack)、堆(heap)：
- 栈一般存储规则、占用空间小且大小基本固定的数据，所以
基本数据类型一般基本数据类型存储在栈中 - 堆一般存储不规则、占用空间大且大小不固定的数据，所以一般
引用数据类型存储在堆中
引用数据类型一般都会在栈中存储一个引用地址，因此，当我们访问一个引用数据类型的时候，其实首先访问的是这个数据存储在栈中的引用地址，然后通过这个地址才最终访问到真正的数据
const a = 1
const b = {
b1:1,
b2:2
}
为什么需要对数据进行拷贝?
let a = 1
let b = {
b1:1,
b2:2
}
const c = a
const d =b
a = 2
b.b1=1.1
可以发现，虽然d在栈中新开辟了一个空间，但是它指向的堆内存指针和b是一样的，因此，当修改堆内存里的数据时，相应的d也会更改.
但是很多时候我们需要他们和基本数据类型一样，是互相独立的，互不影响，此时我们就需要拷贝一份堆数据，然后将新数据的指针指向这个新的堆数据
思考：为什么写vue模板时，data要求是一个函数呢？
// test1
var a = {
test1:1,
test2:2
}
var b = a
var c = a
console.log(b === c) // true
// test2
var a = function (){
return {
test1:1,
test2:2
}
}
var b = a()
var c = a()
console.log(b === c) // false
可以发现，当我们创建对象时通过在函数内返回对象的方式去创建，能够保证每一次的赋值都是一个新鲜的互不影响的对象，因此在vue模板中的data通过函数的方式创建数据，可以保证多个地方引用相同的模板时，互相之间的数据不会互相影响
引用类型的拷贝
一般我们在谈论拷贝时，都会想到浅拷贝和深拷贝；
-
浅拷贝，就是只拷贝对象的第一层数据，如果第二层还存在引用类型，则依然会有问题的，我理解的应用场景：- 明确的知道我要拷贝的对象是一个简单的，只有一层的数据
- 虽然对象比较复杂，但是明确的知道只会更改第一层简单的，不存在第二层的变量数据，这时浅拷贝会有一丢丢的性能提升
-
深拷贝，就是将一个对象完全的拷贝出来，无论层级多深，多复杂，一般为公司util方法的时候，使用的都是深拷贝
浅拷贝的实现
方法一：Object.assign
const obj = {a:1,b:2};
const cloneObj = Object.assign({}, obj);
提示：
Object.assign方法只会拷贝源对象自身的并且可枚举的属性,使用源对象的[[Get]]和目标对象的[[Set]],因此如果要拷贝的对象包含继承属性和不可枚举属性,则这些属性将不可被拷贝
方法二：通过解构赋值的方式
const obj = {a:1,b:2};
const cloneObj = {...obj};
提示：
展开语法和Object.assign()的行为一致
深拷贝的实现
方法一：JSON.parse
JSON.stringify会将数据转换成JSON字符串的形式，存储在栈中，然后再通过JSON.parse重新转换成对象，存储在堆中。通过转换成字符串的方式，巧妙地重新生成了一份对象的副本
const obj = {
a:{a1:1,a2:2},
b:{b1:1,b2:2}
};
const cloneObj = JSON.parse(JSON.stringify(obj));
如此简单的深拷贝，还是有使用限制的：
- 对于诸如
Map,Set,RegExp,Date,ArrayBuffer和其他内置类型在进行序列化时会丢失或变化。
var obj = {
a: function() {}, // 丢失
b: new RegExp(/ab+c/, 'i'),
c: 123,
d: new Set([1,2,3])
}
console.log(JSON.parse(JSON.stringify(obj)))
// {
// b:{},
// c:123,
// d:{}
// }
- 如果对象内部存在循环引用关系，则会报错
var obj = {
a:1
}
var obj2 = {
b: obj
}
obj.c = obj2
console.log(JSON.parse(JSON.stringify(obj)))
// Uncaught TypeError: Converting circular structure to JSON
- 如果对象的层级太深，则会
栈溢出
var obj = {}, cur = obj;
for (let i = 0; i < 10000; i++) {
cur.next = {}
cur = cur.next
}
JSON.parse(JSON.stringify(obj))
// RangeError: Maximum call stack size exceeded
因此如果能够明确知道要拷贝的对象结构及复杂度，则可以考虑是否使用此方式。
延伸：实现JSON.stringify函数
方法二： 递归
// 面试够用版
function deepClone(obj){
if (obj instanceof RegExp) return new RegExp(obj)
if (obj instanceof Date) return new Date(obj)
if (typeof obj !== "object" || obj === null) return obj;
let newObj=Array.isArray(obj)?[]:{}
for(var attr in obj){
if (Object.prototype.hasOwnProperty.call(obj, attr)) {
newObj[attr]=deepClone(obj[attr])
}
}
return newObj
}
但是，这个递归版的深拷贝还是会有方法一的问题：
- 存在循环引用的情况会爆栈
RangeError: Maximum call stack size exceeded - 对象层次太深也会爆栈
RangeError: Maximum call stack size exceeded
解决递归是循环引用的问题
通过Map或者别的方式存储已经遍历过的对象，然后在每次递归时判断map中有没有存储过，如果存储过就返回存储的对象，这样就可以解决循环引用问题
function deepClone(obj, map = new Map()){
if (obj instanceof RegExp) return new RegExp(obj)
if (obj instanceof Date) return new Date(obj)
if (typeof obj !== "object" || obj === null) return obj;
let newObj=Array.isArray(obj)?[]:{}
if (map.get(obj)) {
return obj;
}
map.set(obj, newObj);
for(var attr in obj){
if (Object.prototype.hasOwnProperty.call(obj, attr)) {
newObj[attr]=deepClone(obj[attr], map)
}
}
return newObj
}
解决层级太深爆栈的问题一
理论上用尾调用的方式递归是可以解决这个问题的。
尾调用优化:es6规范规定，只要实现了尾调用，那么在递归里面就不会出现栈溢出报错。
但现实是，很多浏览器都没有实现这个规范，依然会出现栈溢出报错，尾调用还有一个限制条件就是必须要在严格模式下才生效。
v8引擎曾实现过这一功能，但后来又删除了调用优化，因为尾递归优化会破坏函数的调用栈信息。同时TC39 也在寻找新的语法来显式指明需要使用尾递归优化。
解决层级太深爆栈的问题二：DFS||BFS
理论上，所有的递归都可以通过迭代的方式实现，而迭代的方式就不会出现栈溢出的问题，只不过实现迭代方式的难易程度不一样！
在深拷贝这个问题上，我们可以通过栈+迭代的方式来实现：深度优先遍历(DFS)或广度优先遍历(BFS) ，实现原理差不多，我们以BFS举例：来源
function getEmpty(o){
if(Object.prototype.toString.call(o) === '[object Object]'){
return {};
}
if(Object.prototype.toString.call(o) === '[object Array]'){
return [];
}
return o;
}
function deepCloneBFS(origin) {
let queue = []; // 栈存储解构
let map = new Map(); // 记录出现过的对象，用于处理环
let target = getEmpty(origin);
if(target !== origin){
queue.push([origin, target]);
map.set(origin, target);
}
while(queue.length){
let [ori, tar] = queue.shift();
for(let key in ori){
// 处理环状
if(map.get(ori[key])){
tar[key] = map.get(ori[key]);
continue;
}
tar[key] = getEmpty(ori[key]);
if(tar[key] !== ori[key]){
queue.push([ori[key], tar[key]]);
map.set(ori[key], tar[key]);
}
}
}
return target;
}
结构化克隆算法
MDN由HTML5规范定义的用于复制复杂JavaScript对象的算法,可以避免无限遍历循环，支持的数据类型也比较多，但是，目前应该只有内置的api实现了此功能，所以如果需要使用这个功能就需要借助内置API，间接实现克隆！Channel Messaging API的Channel Messaging接口的实现兼容性算是比较好的。
[图片上传失败...(image-473666-1627546631737)]
node 序列化API（v8.0.0版本以上）
node 提供了一个序列化API可以和HTML结构化克隆相媲美，用法也比较简单
const buf = v8.serialize(obj);
const clone = v8.deserialize(buf);
console.log(clone);
immerjs的另辟蹊径
其实上面的方法都有一个问题，那就是，无论我们有没有使用数据，都会对所有数据进行一次遍历，对于庞大的数据来说，性能并不是特别好，因此可以考虑通过Proxy代理方式的方式对用到的对象进行拷贝，没有用到的部分，依然是同一份数据。
Immer就是通过这样的思想，以最小的成本实现了 js 的不可变对象
最后
最好的克隆方法，取决于使用环境和对象的复杂度。
