之深克隆与浅克隆"/>
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}
更多推荐
JavaScript之深克隆与浅克隆
发布评论