一、浅拷贝和深拷贝
(1)基本类型
5种基本数据类型,Number、String、Boolean、Null以及Undefined,变量是直接按值存放的,存放在栈内存中的简单数据,可以直接访问。
(2)引用类型
存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。
当需要访问引用类型(比如对象,数组)时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。
浅拷贝
如下面代码所示:
var x = { a:1, b:2 }; var y = x; y.a = 3; console.log(x);//{a: 3, b: 2} console.log(y);//{a: 3, b: 2}
这是浅拷贝,x和y指向的是同一个堆,对象复制只是复制的对象的引用。
复制的副本其实只是一个指针,两个变量指向同一个堆对象,改变其中一个变量,另一个也会受影响。
深拷贝
如下面代码所示:
var x = { a:1, b:2 }; var y = { a:x.a, b:x.b }; y.a = 3; console.log(x);//{a: 1, b: 2} console.log(y);//{a: 3, b: 2}
x对象和y对象是虽然所有的值都是一样的,但是在堆里面,对应的不是同一个了。
深拷贝和浅拷贝的示意图如下:
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
二、浅拷贝的实现方式
1.通过赋值实现
将浅拷贝封装成一个函数,如下代码所示:
function shallowCopy (src) { var result = {}; for(let prop in src){ result[prop] = src[prop]; } return result; } var obj = { a:1, arr:[2,3] }; var shallowObj = shallowCopy(obj); shallowObj.arr[1] = 5; console.log(obj); console.log(shallowObj);
结果如下图所示:
2.通过Object.assign()实现
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。
但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
如下面代码所示:
var x = { a:{ b:1, c:2 } }; var y = Object.assign({},x); y.a.b = 3; console.log(x);//{a:{b:3,c:2}} console.log(y);//{a:{b:3,c:2}}
注意:当object只有一层的时候,是深拷贝,如下代码所示:
var x = { a:1, b:2 }; var y = Object.assign({},x); y.a = 3; console.log(x);//{a: 1, b: 2} console.log(y);//{a: 3, b: 2}
三、深拷贝的实现方式
1.当对象只有一层时,通过Object.assign()实现,如上
2.JSON对象的stringify以及parse方法
JSON.stringify方法将js对象序列化成JSON字符串,JSON.parse方法将JSON字符串反序列化为js对象。
借助这两个方法,可以实现对象的深拷贝。
var x = { a:1, b:2 }; var y = JSON.parse(JSON.stringify(x)); y.a = 3; console.log(x);//{a: 1, b: 2} console.log(y);//{a: 3, b: 2}
3.jQuery 的$.extend方法
var $ = require('jquery'); var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; var obj2 = $.extend(true, {}, obj1); console.log(obj1.b.f === obj2.b.f);// false
4.原生js实现深拷贝
function deepCopy(obj) { if(obj === null){ return obj; } //定义一个结果变量为newobj,判断结果为数组还是对象 let newobj = Array.isArray(obj)?[]:{}; for(let key in obj){ //如果是对象应该深拷贝,在堆内存中开辟新的内存,递归实现,否则进行浅拷贝 if(typeof obj[key] === 'object'){ newobj[key] = deepCopy(obj[key]); }else { newobj[key] = obj[key]; } } return newobj; } //测试数据如下 let Obj = {a:1,b:{c:2,d:3}}; let newobj = deepCopy(Obj); newobj.a=5; console.log(Obj);//{a:1,b:{c:2,d:3}} console.log(newobj);//{a:5,b:{c:2,d:3}} let arr = [1,2,3,[4,5,6]]; let newarr = deepCopy(arr); newarr[0]=7; console.log(arr);//[1,2,3,[4,5,6]] console.log(newarr);//[7,2,3,[4,5,6]]