JavaScript 对象拷贝

JavaScript 对象拷贝

JavaScript 如何复制一个对象？浅拷贝可以复制出原始值属性，但是对于引用值属性仅仅复制了一份引用。利用递归对每个引用值属性的属性进行复制，这种方式称之为深拷贝

问题引入

var person1 = {
	name: '张三',
	age: "22"
}
var person2 = person1;

我们希望拷贝一份 person1 的属性给 person2，赋值是最简单的做法，但是这并不是我们想要的结果。 因为这仅仅是将 person1、person2 指向了同一对象，修改其一，会相互影响

对象浅拷贝

var person1 = {
	name: '张三',
	age: 22,
	son: {
		name: '张小三',
		age: 1
	}
}
var person2 = {};
for (var key in person1) {
	person2[key] = person1[key];
}

循环将 person1 的属性取出赋值给 person2，对于原始类型属性，不相互影响，可以成功拷贝，但是对于引用类型的属性，如 person2.son 和 person1.son 指向了同一对象，修改其一，会相互影响

如果不需要 person1 原型链上的属性，赋值时使用 hasOwnProperty() 判断

对象深拷贝

浅拷贝复制引用值只是将引用指向这个值，并不是复制了一份，修改其一，会相互影响。我们可以将属性中的引用值也循环其属性，复制到目标对象的属性。这种需求适合递归

var person1 = {
	name: '张三',
	age: 30,
	son: {
		first: {
			name: '小一',
			age: 3
		}
	}
}

function deepClone(origin) {
	var target = {};
	var toStr = Object.prototype.toString;
	for (var key in origin) {
		if (!origin.hasOwnProperty(key)) continue;
		if (typeof(origin[key]) === 'object' && origin[key] !== null) {
			if (toStr.call(origin[key]) === "[object Array]") {
				target[key] = [];
			} else {
				target[key] = {};
			}
			target[key] = deepClone(origin[key]);
		} else {
			target[key] = origin[key];
		}
	}
	return target;
}

var person2 = deepClone(person1);
person2.son.sencond = {
	name: '小二',
	age: 2
}
console.log(person2);
console.log(person1);

person2 含有 person1 的所有属性，对于原始值属性进行修改，不会相互影响