JavaScript深克隆与浅克隆

2019-01-11  本文已影响12人  LeeYaMaster

在JavaScript高级编程那本书中,(就是那本封面小男孩拿着望远镜,总共一千多页那本书),有一章节便讲到了这里。那么什么是深克隆与浅克隆呢?我们来看下面的示例代码:

           var a = {
                name: "zhangsan",
                age: 18
            };
            var b = a;
            b.name = "lisi";
            console.log(a); //{age:18,name:"lisi"}
            console.log(b); //{age:18,name:"lisi"}

定义一个对象a,赋值两个属性,接着让b=a,赋值过去。然后修改b的属性,但是却发现,我们console.log(a和b),只修改了b的值,却把a的值也修改了。这是为什么呢?那是因为b=a,a是一个对象,对象的赋值,是赋值对象在内存中的引用,也就是说,b=a之后,b和a都指向同一个内存地址,这也就是为什么修改一个,而另外一个也会修改的原因,


内存指向

为了避免这个问题,那么我们就要把它的值全部拿出来,通过循环的方式,这里可以用递归。值全部拿出来后,再赋值,就可以达到效果了,不过注意,采用这种方式比较耗内存。

            function deepClone(arr) {
                if(typeof arr != "object") {
                    return arr;
                }
                var result = {};
                for(var i in arr) {
                    result[i] = deepClone(arr[i]);
                }
                return result;
            }
            var e = {
                name: "zhangsan",
                age: 18
            };
            var f = deepClone(e);
            f.name = "lisi";
            console.log(e); //{age:18,name:"zhangsan"}
            console.log(f); //{age:18,name:"lisi"}

这里f=e,把e赋值到f里面去,因为是深克隆,把所有的值都拿出来了。所以赋值过去的是值,而不是引用的地址。所以修改f并不会影响到e。

上一篇下一篇

猜你喜欢

热点阅读