JS中的对象克隆之深度克隆(拷贝)

发表于 | 分类于

在学习JavaScript的一些总结和经验，供大家参考和学习，同时也欢迎大家参与讨论。

2. 深度克隆(拷贝)

前言：在上一篇文章开头的介绍中我们是不是说过对一个对象进行修改不会影响到另一个对象，但是很明显，在浅度克隆中对obj1中的sex改动的时候（因为sex是数组，是引用类型，为堆内存中的对象），obj2中的sex也随着改动了，这样就达不到我们想要的效果，所以深度克隆就是来解决这个问题的。

  • 前提 : 首先，深度克隆会稍微比较难一点，所以读这篇文章你要理解一下JavaScript中的原型，还有以下几个方法的应用。

Object.hasOwnProperty(prop)

Object.prototype.toString()

Function.prototype.apply()

Function.prototype.call()

至于如何应用，那就要读者自己去了解了,可以到各大博客社区或者MDN,javaScript高程设计看看

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">
	//深度克隆:
	var obj = {
		name : 'abc',//（原始值）
		age : 18,//（原始值）
		card : ['visa','master'],//数组(引用值)
		wife : {//对象(引用值)
			name : 'Tom',
			son : {
				name: 'mySon'
			}
		}
	};
	var obj1 = {};
//遍历对象 for (var prop in obj) 数组也能for in (其中prop为索引值)
//1、判断是不是原始值typeof()
//2、判断是数组还是对象      
//3、建立相应的数组或对象

function deepClone(origin,target) {
	var target = target || {},
		toStr = Object.prototype.toString,//使用toString()检测对象类型
		arrStr = '[object Array]';
	for(var prop in origin){
		if (origin.hasOwnProperty(prop)) {//判断是不是原型上面的,如果是返回false
			if (origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
				if(toStr.call(origin[prop]) == arrStr){
				//判断是不是数组[object Array]
					target[prop] = [];
				}else{
					target[prop] = {};
				}
				deepClone(origin[prop],target[prop]);//递归操作
			}else{
				target[prop] = origin[prop];
			}
		}
	}
	return target;
}

//利用三目运算符简化代码，如下：
	function deepClone(origin,target) {
	var target = target || {},
		toStr = Object.prototype.toString,
		arrStr = '[object Array]';
	for(var prop in origin){//遍历对象
		if (origin.hasOwnProperty(prop)) {//判断是不是原型上面的,如果是返回false
			if (origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
				target[prop] = toStr.call(origin[prop]) == arrStr? [] : {};
				deepClone(origin[prop],target[prop]);//递归操作
			}else{
				target[prop] = origin[prop];
			}
		}
	}
	return target;
}
</script>

简化代码：

利用JSON对象中的stringify()和parse()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
	var book = {
	    title: "professional javaScript",
	    authors: [
	        "yicong",
	        "wangyicong"
	    ],
	    edition: 3,
	    year: 2019,
	    name: undefined, // 不会输出，只输出有效的JSON数据类型的实例属性
	};
	
	var copyBook = JSON.parse(JSON.stringify(book));
	console.log(copyBook);
	book.title = "我是一个基础数据类型";
	book.authors.push("我是一个引用数据类型");
	console.log(book);
</script>


文章标题: JS中的对象克隆之深度克隆(拷贝)
文章作者: 王奕聪，QQ:1301842163
许可协议: 知识共享许可协议
©署名-非商用-相同方式共享 4.0