JavaScript之深拷贝&浅拷贝
深拷贝&浅拷贝,说起来都明白,但是说不出所以然。今天就系统的整理下思绪,一点点的将其分析出所以然
废话不多说
浅拷贝
简单的说就是一个值引用,学生时代接触过编程的人都应该了解过指针,浅拷贝可以说就是变量拷贝的是数据的地址而不是数据本身,所以从直观上看来,好像是一个数据改变了, 所有数据都改变了
var obj1 = {
str: "good"
}
var obj2 = obj1;
console.log(obj2.str); //good
obj2.str = "bad";
console.log(obj1.str); //bad
通过浅拷贝 A 和 B 指向相同的内存地址,通过 A (或 B)对数据进行修改,相应的在 B (或 A)可以得到体现
那么就 JavaScript 中来说,浅拷贝一般是指数组对象的浅拷贝,因为基本数据类型的赋值都是值传递(所以深拷贝都是一层一层的拨开对象或数组,直到基本数据类型然后进行赋值拷贝,完成)
function copy(obj) {
var cc = {};
for(var i in obj) {
cc[i] = obj[i];
}
return cc;
}
var obj1 = {
name: "yellow",
arr: ["北京", "上海", "广州"]
}
var obj2 = copy(obj1);
obj2.name = "blue";
obj2.arr.push("深圳");
此时,对象 obj1 和 obj2 的如下图所示, 可以看到属性 name 的值是不一样的,但是属性 arr 由于是一个数组,两个对象里都多了一个“深圳”,因为他们都是一个值引用, 两个对象里的arr 指向同一块内存地址,所以通过其中一个改变其值,另一个的值也会跟着改变。这是一个非常常见的一个浅拷贝的例子。
到这里,我们可以总结一下:浅拷贝,对于基本数据类型是值传递,而对于引用类型(对象等)是进行的引用传递。
深拷贝
深拷贝,从字面看,就是比浅深一点。
深拷贝与浅拷贝从我们直观测试看得到的地方来说,区别就是:深拷贝之后,两个值的变化互不影响
怎样达到这个目的呢?就是在拷贝的时候,是把值传递出去,还不是单纯的指向值的位置,就像上边的 name 值一样。
可以对比下上边两段代码的 str 属性和 name 属性,发现了什么么。在第一段代码中 str 属性是放在对象 obj1 里边进行的赋值,是以对象 obj1 为单位的,第二段代码中,name 属性是以name 属性本身为单位的赋值,name 本身是一个字符串类型(基本数据类型),所以进行的是值传递。
所以, 如果在进行赋值拷贝时,如果一个值是引用类型(对象), 那么就“刨”一层,直到遇到基本数据类型,然后进行赋值。从而使整个拷贝都是基于基本数据类型进行的,最终达到我们深拷贝的结果
上一段简单的深拷贝示例代码
function deepCopy(obj) {
if(typeof obj !== "object" && obj === null) {
return;
} else {
var cc = obj.constructor === Array?[]:{};
}
for(var i in obj) {
if(typeof obj[i] === "object") {
cc[i] = deepCopy(obj[i]);
} else {
cc[i] = obj[i];
}
}
return cc;
}
以上是个人对深拷贝&浅拷贝的理解,欢迎交流点评。