js浅拷贝与深拷贝

一、赋值

很多时候，我们会弄混浅拷贝与赋值。我们先来看看赋值是如何实现的

当我们把一个对象赋值给一个新的变量时，赋的是该对象在栈中的地址值，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个发生改变，其实都是改变的存储空间的内容，因此两个对象是联动的。

let person = {
	name:'爱就一个字',
	hobby:['学习',['看电影','shopping'],'跑步']
}
let person1 = person
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

如上结果，改了name和hobby，原来的数据都会发生改变。

二、浅拷贝

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

let person = {
	name:'爱就一个字',
	hobby:['学习',['看电影','shopping'],'跑步']
}
function shallowCopy (obj) {
	let target = {}
	for(let i in obj) {
		if(obj.hasOwnProperty(i)) {
			target[i] = obj[i]
		}
	}
	return target
}
let person1 = shallowCopy(person)
// 调用shallowCopy()并且把person传进去了，返回一个target对象，这个target对象是原来person对象的精确拷贝
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

如上结果，name是基本数据类型，改了person1的name，person的name并没有受到影响，它本身的值不变；而hobby是引用数据类型，改了person1的hobby，person的hobby也会受到影响，它原来的值也被改变了，因为它们指向的是同一个地址。

小结：
浅拷贝就是重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。

三、深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。

let person = {
	name:'爱就一个字',
	hobby:['学习',['看电影','shopping'],'跑步']
}
function deepClone (obj) {
	let cloneObj = {}
	if(typeof obj !== 'object') return obj
	for(let i in obj) {
		if(obj.hasOwnProperty(i)) {
			cloneObj[i] = deepClone(obj[i])
		}
	}
	return cloneObj
}
let person1 = deepClone(person)
person1.name = '小明'
person1.hobby[0] = '玩耍'
console.log(person);
console.log(person1);

如上结果，改了person1的name，person的name并没有受到影响，它本身的值不变；改了person1的hobby，person的hobby也没有受到影响，它原来的值也不变。

四、总结