JS深拷贝与浅拷贝：一文读懂它们的区别与实现方法

人亦已歌

JS深拷贝与浅拷贝：一文读懂它们的区别与实现方法

前言

这个月太忙了，一直没时间更新博客。帮楼下房友用react写系统，react终于应用于实际项目了。房友前端技术栈是react+dva+antd+nodejs+webpack，这些后面有时间具体总结。今天写一下js的深拷贝和浅拷贝，这个名词经常听到，但是可能有的同学不是很明白他们的意思。今天就用浅显易懂的语言和大家介绍一下！

浅拷贝

浅拷贝其实我之前有文章具体讲过，不过没有提及这个名词罢了，例如：js内存空间及this关键词详解，这篇文章，里面讲到如下：

2. var m = { a: 10, b: 20 }
3. var n = m;
4. n.a = 15;
5. // 这时m.a的值是多少

复制代码

m.a会输出15，因为这是浅拷贝，n和m指向的是同一个堆，对象复制只是复制的对象的引用。

深拷贝

深拷贝和上面浅拷贝不同，就是彻底copy一个对象，而不是copy对象的引用，例如，还是之前的例子，我们这么写：

2. var m = { a: 10, b: 20 }
3. var n = {a:m.a,b:m.b};
4. n.a = 15;

复制代码

这次，我们再来输出m.a ，发现m.a的值还是10,并没有改变，m对象和n对象是虽然所有的值都是一样的，但是在堆里面，对应的不是同一个了，这个就是深拷贝。

深拷贝和浅拷贝

深拷贝和浅拷贝的示意图大致如下：

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝的实现方式

1、可以通过简单的赋值实现

类似上面的例子，当然，我们也可以封装一个简单的函数，如下：

2. function simpleClone(initalObj) {
3. var obj = {};
4. for ( var i in initalObj) {
5. obj[i] = initalObj[i];
6. }
7. return obj;
8. }
9. var obj = {
10. a: "hello",
11. b:{
12. a: "world",
13. b: 21
14. },
15. c:["Bob", "Tom", "Jenny"],
16. d:function() {
17. alert("hello world");
18. }
19. }
20. var cloneObj = simpleClone(obj);
21. console.log(cloneObj.b);
22. console.log(cloneObj.c);
23. console.log(cloneObj.d);
24. cloneObj.b.a = "changed";
25. cloneObj.c = [1, 2, 3];
26. cloneObj.d = function() { alert("changed"); };
27. console.log(obj.b);
28. console.log(obj.c);
29. console.log(obj.d);

复制代码

2、Object.assign()实现

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

2. var obj = { a: {a: "hello", b: 21} };
3. var initalObj = Object.assign({}, obj);
4. initalObj.a.a = "changed";
5. console.log(obj.a.a); // "changed"

复制代码

注意：当object只有一层的时候，是深拷贝，例如如下：

2. var obj1 = { a: 10, b: 20, c: 30 };
3. var obj2 = Object.assign({}, obj1);
4. obj2.b = 100;
5. console.log(obj1);
6. // { a: 10, b: 20, c: 30 } <-- 没被改到
7. console.log(obj2);
8. // { a: 10, b: 100, c: 30 }

复制代码

深拷贝的实现方式

1、方法一还是手动复制

和上面的举例一样，手动复制可以实现深拷贝。

2、对象只有一层的话可以使用上面的：Object.assign()函数

3、转成 JSON 再转回来

2. var obj1 = { body: { a: 10 } };
3. var obj2 = JSON.parse(JSON.stringify(obj1));
4. obj2.body.a = 20;
5. console.log(obj1);
6. // { body: { a: 10 } } <-- 没被改到
7. console.log(obj2);
8. // { body: { a: 20 } }
9. console.log(obj1 === obj2);
10. // false
11. console.log(obj1.body === obj2.body);
12. // false

复制代码

用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

可以封装如下函数

2. var cloneObj = function(obj){
3. var str, newobj = obj.constructor === Array ? [] : {};
4. if(typeof obj !== 'object'){
5. return;
6. } else if(window.JSON){
7. str = JSON.stringify(obj), //系列化对象
8. newobj = JSON.parse(str); //还原
9. } else {
10. for(var i in obj){
11. newobj[i] = typeof obj[i] === 'object' ?
12. cloneObj(obj[i]) : obj[i];
13. }
14. }
15. return newobj;
16. };

复制代码

4、递归拷贝

2. function deepClone(initalObj, finalObj) {
3. var obj = finalObj || {};
4. for (var i in initalObj) {
5. var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
6. if(prop === obj) {
7. continue;
8. }
9. if (typeof prop === 'object') {
10. obj[i] = (prop.constructor === Array) ? [] : {};
11. arguments.callee(prop, obj[i]);
12. } else {
13. obj[i] = prop;
14. }
15. }
16. return obj;
17. }
18. var str = {};
19. var obj = { a: {a: "hello", b: 21} };
20. deepClone(obj, str);
21. console.log(str.a);

复制代码

5、使用Object.create()方法

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。

2. function deepClone(initalObj, finalObj) {
3. var obj = finalObj || {};
4. for (var i in initalObj) {
5. var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
6. if(prop === obj) {
7. continue;
8. }
9. if (typeof prop === 'object') {
10. obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
11. } else {
12. obj[i] = prop;
13. }
14. }
15. return obj;
16. }

复制代码

6、jquery

jquery 有提供一个$.extend可以用来做 Deep Copy。

2. var $ = require('jquery');
3. var obj1 = {
4. a: 1,
5. b: { f: { g: 1 } },
6. c: [1, 2, 3]
7. };
8. var obj2 = $.extend(true, {}, obj1);
9. console.log(obj1.b.f === obj2.b.f);
10. // false

复制代码

7、lodash

另外一个很热门的函数库lodash，也有提供_.cloneDeep用来做 Deep Copy。

2. var _ = require('lodash');
3. var obj1 = {
4. a: 1,
5. b: { f: { g: 1 } },
6. c: [1, 2, 3]
7. };
8. var obj2 = _.cloneDeep(obj1);
9. console.log(obj1.b.f === obj2.b.f);
10. // false

复制代码

这个性能还不错，使用起来也很简单。

小结

上面就是对js深拷贝和浅拷贝的总结，其中部分参考了一些文章， 例如

JavaScript中的深拷贝和浅拷贝？

关于 JS 中的浅拷贝和深拷贝

JavaScript中对象的深拷贝