Fork me on GitHub

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;
}

以上是个人对深拷贝&浅拷贝的理解,欢迎交流点评。

posted @ 2016-09-24 13:58  Chris-dc  阅读(321)  评论(0编辑  收藏  举报