JavaScript之深克隆与浅克隆

之深克隆与浅克隆"/>

JavaScript之深克隆与浅克隆

一.JavaScript中的内存管理

在JS中，每一个数据都需要一个内存空间。内存空间又被分为两种。

 栈内存(stock)堆内存(heap)

堆栈空间分配区别：

栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等。
简单数据类型存放到栈里面。堆：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面。

注意：JavaScript中没有堆栈概念，通过栈堆的方式，可以让大家更容易理解代码的一些执行方式。

我画了一张图，可以帮助大家理解

那么问题来了，存在栈里面的简单数据类型有哪些，存在堆里面的复杂数据类型有哪里？

• 简单数据类型
  又叫基本数据类型和值类型
  string、number、null、undefined、Boolean、Symbol(ES6)

• 复杂数据类型
  又叫引用类型
  object、array、function、date等等

了解了上面的知识以后，那我们来看看浅克隆和深克隆
首先我们先记住一句话，简单数据类型的传参，是值的直接传递，复杂数据类型的传参，是内存地址的传递。

问：为什么会产生深克隆和浅克隆

答：js有两种大类的类型：基本类型（undefined、Null、Boolean、Number和String）和引用类型（Object、Array和Function）,基本类型的复制是不会产生深度复制和浅度复制问题，当使用引用类型进行复制的时候，其实复制的是指向内存值的指针，并没有真实复制其数据（浅复制）。

二.浅克隆

        var obj1 = { a: 10, b: 20, c: 30 };var obj2 = obj1;obj2.b = 100;console.log(obj1);  // { a: 10, b: 100, c: 30 } <-- b 被改到了console.log(obj2);  // { a: 10, b: 100, c: 30 } 

正是因为obj2与obj1用的是同一个内存地址，所以当obj2发生改变时，obj1也会跟着发生改变，同理obj1发生改变obj2也会改变。

浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化（根本上改变的是同一个对象）。

三.深克隆

深克隆就是创建一个新的对象，开辟一块内存，然后将原对象中的数据全部复制过去，新对象和原对象毫无关系，互不影响。

3.1JSON.parse方法

JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列转化成JSON字符串，这两个方法结合起来就能产生一个便携的深克隆。

        var obj1 = { a: 10, b: 20, c: 30 };var obj2=JSON.parse(JSON.stringify(obj1));console.log(obj1); //{a: 10, b: 20, c: 30}console.log(obj2); //{a: 10, b: 20, c: 30}obj2.a=200;console.log(obj1); //{a: 10, b: 20, c: 30}console.log(obj2); //{a: 200, b: 20, c: 30}

这个方法虽然可以解决绝大部分使用场景，但是却有很多的坑。

• 他无法实现对函数、RegExp等特殊对象的克隆。
• 会抛弃对象的constructor，所有的构造函数都会指向object
• 对象有循环引用，会报错

3.2Array.from(arr)

对于数组在ES6种可以使用Array.from(arr);

        var arr1=[1,2,3,4,5,6];var arr2=Array.from(arr1);console.log(arr1);//[1, 2, 3, 4, 5, 6]console.log(arr2);//[1, 2, 3, 4, 5, 6]arr2[0]=100;console.log(arr1);//[1, 2, 3, 4, 5, 6]console.log(arr2);//[100, 2, 3, 4, 5, 6]

3.3ES6中的扩展运算符 …

        var arr1=[1,2,3,4,5,6];var arr2=[...arr1];console.log(arr1);//[1, 2, 3, 4, 5, 6]console.log(arr2);//[1, 2, 3, 4, 5, 6]arr2[0]=200;console.log(arr1);//[1, 2, 3, 4, 5, 6]console.log(arr2);//[200, 2, 3, 4, 5, 6]

3.4递归复制所有属性

        // 使用 instanceof 就是判断一个实例是否属于某种类型var arr1=[1, 2, 3, 4, 5, 6];function clone(obj){var buf;if(obj instanceof Array){buf = [];var i = obj.length;while(i--){buf[i] = clone(obj[i]);}return buf;}else if(obj instanceof Object){buf = {};for(var k in obj){buf[k] = clone(obj[k]);}return buf;}else{return obj;}}var arr2=clone(arr1);console.log(arr1); //[1, 2, 3, 4, 5, 6]console.log(arr2); //[1, 2, 3, 4, 5, 6]arr2[0]=100;console.log(arr1); //[1, 2, 3, 4, 5, 6]console.log(arr2); //[100, 2, 3, 4, 5, 6]var obj1={a: 10, b: 20, c: 30};var obj2=clone(obj1);console.log(obj1); //{a: 10, b: 20, c: 30}console.log(obj2); //{a: 10, b: 20, c: 30}obj2.a=200;console.log(obj1); //{a: 10, b: 20, c: 30}console.log(obj2); //{a: 200, b: 20, c: 30}obj1.c=1000;console.log(obj1); //{a: 10, b: 20, c: 1000}console.log(obj2); //{a: 200, b: 20, c: 30}