深入浅出理解 . 深拷贝 . 浅拷贝

Posted 2022-09-29 caominjie

前言

百科定义：拷贝就是拷贝指向对象的指针，意思就是说：拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间，浅拷贝只是一种简单的拷贝，让几个对象公用一个内存，然而当内存销毁的时候，指向这个内存空间的所有指针需要重新定义，不然会造成指针错误。

拷贝内容总结

数据类型与堆栈的关系

基本类型与引用类型

. 基本类型：undefined,null,Boolean,String,Number,Symbol

. 引用类型：Object,Array,Date,Function,RegExp等

存储方式

. 基本类型：基本类型值在内存中占据固定大小，保存在栈内存中（不包含闭包中的变量）

. 引用类型：引用类型的值是对象，保存在堆内存中。而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址(引用)，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

.

注意:

1. 闭包中的变量并不保存在栈内存中，而是保存在堆内存中。这一点比较好想，如果闭包中的变量保存在了栈内存中，随着外层中的函数从调用栈中销毁，变量肯定也会被销毁，但是如果保存在了堆内存中，内存函数仍能访问外层已销毁函数中的变量。看一段对应代码理解下：

function A() 
  let a = 'koala'
  function B() 
      console.log(a)
  
  return B

基本数据类型复制配图：

结论：在栈内存中的数据发生数据变化的时候，系统会自动为新的变量分配一个新的之值在栈内存中，两个变量相互独立，互不影响的。

引用数据类型复制

看一段代码

let a = x:'kaola', y:'kaola1'
let b = a;
b.x = '程序员成长指北';
console.log(a.x); // 程序员成长指北

引用类型的复制，同样为新的变量b分配一个新的值，报错在栈内存中，不同的是这个变量对应的具体值不在栈中，栈中只是一个地址指针。两个变量地址指针相同，指向堆内存中的对象，因此b.x发生改变的时候，a.x也发生了改变。

浅拷贝

浅拷贝定义：

不知道的api我一般比较喜欢看MDN，浅拷贝的概念MDN官方并没有给出明确定义，但是搜到了一个函数Array.prototype.slice，官方说它可以实现原数组的浅拷贝。
对于官方给的结论，我们通过一段代码验证一下，并总结出浅拷贝的定义。

var a = [ 1, 3, 5,  x: 1  ];
var b = Array.prototype.slice.call(a);
b[0] = 2;
console.log(a); // [ 1, 3, 5,  x: 1  ];
console.log(b); // [ 2, 3, 5,  x: 1  ];

从输出结果可以看出，浅拷贝后，数组a[0]并不会随着b[0]改变而改变，说明a和b在栈内存中引用地址并不相同。

浅拷贝定义：

通过这个官方的slice浅拷贝函数分析浅拷贝定义：

新的对象复制已有对象中非对象属性的值和对象属性的引用。如果这种说法不理解换一种一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。

深拷贝操作

说了赋值操作和浅拷贝操作，大家是不是已经能想到什么是深拷贝了，下面直接说深拷贝的定义。

深拷贝定义

深拷贝会另外拷贝一份一个一模一样的对象,从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不共享内存，修改新对象不会改到原对象。