深入理解javascript的浅拷贝与深拷贝
2018-03-25 22:10
363 查看
javascript中的浅拷贝与深拷贝,只是针对复杂数据类型(Object,Array)的复制问题。浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。要理解javascript中的浅拷贝与深拷贝的区别,这里需要先理解一下栈内存和堆内存:
基本类型的数据是存放在栈内存中的,而引用类型(复杂数据类型)的数据是存放在堆内存中的,也就是说,基本类型的复制就是在栈内存中开辟出了一个新的存储区域用来存储新的变量,这个变量有它自己的值,只不过和前面的值一样,所以如果其中一个的值改变,则不会影响到另一个。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象,由此拷贝的时候就存在两种情况了:拷贝引用和拷贝实例,这也是浅拷贝和深拷贝的区别。
浅拷贝:浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响
深拷贝:在堆中重新分配内存,并且把源对象所有属性都进行新建拷贝,以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象,拷贝后的对象与原来的对象是完全隔离,互不影响
拷贝原对象的引用:var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = 2;
console.log(b.c); // 输出 2源对象拷贝实例,其属性对象拷贝引用。
这种情况,外层源对象是拷贝实例,如果其属性元素为复杂杂数据类型时,内层元素拷贝引用。
对源对象直接操作,不影响外层源对象,但是对其属性操作时候,会改变外层源对象的属性。
常用方法为:Array.prototype.slice(), Array.prototype.concat(), jQury的$.extend({},obj),例:
var a = [{c:1}, {d:2}];
var b = a.slice();
console.log(a === b); // 输出false,说明外层数组拷贝的是实例
a[0].c = 3;
console.log(b[0].c); // 输出 3,说明其元素拷贝的是引用
var a = {c: {d: 1}};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = 3;
console.log(b.c.d); // 输出 1,没有改变。
然而,需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。
基本类型的数据是存放在栈内存中的,而引用类型(复杂数据类型)的数据是存放在堆内存中的,也就是说,基本类型的复制就是在栈内存中开辟出了一个新的存储区域用来存储新的变量,这个变量有它自己的值,只不过和前面的值一样,所以如果其中一个的值改变,则不会影响到另一个。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象,由此拷贝的时候就存在两种情况了:拷贝引用和拷贝实例,这也是浅拷贝和深拷贝的区别。
浅拷贝:浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响
深拷贝:在堆中重新分配内存,并且把源对象所有属性都进行新建拷贝,以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象,拷贝后的对象与原来的对象是完全隔离,互不影响
浅拷贝
浅拷贝分两种情况,拷贝直接拷贝源对象的引用 和 源对象拷贝实例,但其属性(类型为Object,Array的属性)拷贝引用。拷贝原对象的引用:var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = 2;
console.log(b.c); // 输出 2源对象拷贝实例,其属性对象拷贝引用。
这种情况,外层源对象是拷贝实例,如果其属性元素为复杂杂数据类型时,内层元素拷贝引用。
对源对象直接操作,不影响外层源对象,但是对其属性操作时候,会改变外层源对象的属性。
常用方法为:Array.prototype.slice(), Array.prototype.concat(), jQury的$.extend({},obj),例:
var a = [{c:1}, {d:2}];
var b = a.slice();
console.log(a === b); // 输出false,说明外层数组拷贝的是实例
a[0].c = 3;
console.log(b[0].c); // 输出 3,说明其元素拷贝的是引用
深拷贝
深拷贝后,两个对象,包括其内部的元素互不干扰。常见方法有JSON.parse(),JSON.stringify(),jQury的$.extend(true,{},obj)等例:var a = {c: {d: 1}};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = 3;
console.log(b.c.d); // 输出 1,没有改变。
然而,需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。
相关文章推荐
- 深入理解JavaScript中的堆与栈 、浅拷贝与深拷贝
- 深入理解 JavaScript 对象和数组拷贝
- javascript深拷贝、浅拷贝和循环引用深入理解
- 深入理解JavaScript系列(38):设计模式之职责链模式详解
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
- 深入理解javascript原型和闭包(12)——简介【作用域】(闭包)
- 深入理解javascript原型和闭包(2)——函数和对象的关系
- 深入理解JavaScript的原型和原型链
- 深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】
- 深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
- 深入理解javascript动态插入技术
- 深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
- 深入理解JavaScript系列(15):函数(Functions)
- 【译】深入理解JavaScript系列:2. 变量对象
- javascript深入理解js闭包
- 深入理解javascript原型和闭包(3)——prototype原型
- 读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码
- 深入理解JavaScript系列(13) This? Yes,this!
- 深入理解JavaScript系列(44):设计模式之桥接模式
- 深入理解JavaScript系列(36):设计模式之中介者模式