一、赋值
很多时候,我们会弄混浅拷贝与赋值。我们先来看看赋值是如何实现的
当我们把一个对象赋值给一个新的变量时,赋的是该对象在栈中的地址值,而不是堆中的数据,也就是两个对象指向的是同一个存储空间,无论哪个发生改变,其实都是改变的存储空间的内容,因此两个对象是联动的。
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也没有受到影响,它原来的值也不变。