JS的深浅拷贝

JavaScript016

JS的深浅拷贝,第1张

之所以会出现深浅拷贝的问题,实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段,而引用类型指的是一个对象,而JS不允许我们直接操作内存中的地址,也就是不能操作对象的内存空间,所以,我们对对象的操作都只是在操作它的引用而已。

在复制时也是一样,如果我们复制一个基本类型的值时,会创建一个新值,并把它保存在新的变量的位置上。而如果我们复制一个引用类型时,同样会把变量中的值复制一份放到新的变量空间里,但此时复制的东西并不是对象本身,而是指向该对象的指针。所以我们复制引用类型后,两个变量其实指向同一个对象,改变其中一个对象,会影响到另外一个。

其中第一个参数是我们最终复制的目标对象,后面的所有参数是我们的即将复制的源对象,支持对象或数组,一般调用的方式为

这样我们就得到了一个新的浅拷贝对象。另外[].slice()方法可以视为数组对象的浅拷贝。

如果我们要复制对象的所有属性都不是引用类型时,就可以使用浅拷贝,实现方式就是遍历并复制,最后返回新的对象。

如上面所说,我们使用浅拷贝会复制所有引用对象的指针,而不是具体的值,所以使用时一定要明确自己的需求,同时,浅拷贝的实现也是最简单的。

如果我们需要复制一个拥有所有属性和方法的新对象,就要用到深拷贝,JS并没有内置深拷贝方法,主要是因为:

对象类型在赋值的过程中实际上是复制了地址,从而导致了其中一方被改变其他也都被改变的情况,在开发中我们通常不希望出现这样的问题,这里可以使用浅拷贝来解决这个情况。

首先我们可以通过Object.assign来实现浅拷贝,该函数只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,即为浅拷贝而不是深拷贝。

以下为Object.assign浅拷贝的简单实现:

还可以通过展开运算符...来实现浅拷贝:

但是,浅拷贝只解决了第一层的问题,如果对象下还有对象的话,那么又回到最开始的问题了,第二层的对象拷贝过来的只是地址,两者享有相同的地址,这时就需要用到深拷贝了。

我们通常使用JSON.parse(JSON.stringify(object))来解决:

但是该方法具有以下局限性:

遇到函数、undefined和symbol时,会直接忽略掉他们,该对象不能正常的序列化,此时我们需要实现一个更为完善的深拷贝。

小结:以上深拷贝的方法依然只是较为简易的,要想实现一个比较完美的深拷贝其实是很困难的,需要我们考虑很多种边界情况,比如原型链如何处理、DOM如何处理等。该deepClone函数就有两个较为明显的问题,一是没有解决对象的循环引用的问题(参考方案:用弱映射做一个哈希表,存储原对象,若缓存命中,则过滤本次拷贝,直接使用记忆化数据,否则惰性拷贝。一般不是为了解决IE的兼容性问题,都没有问题,考虑兼容性则按需垫片。生产环境其实还需要考虑其它类型的拷贝,一般直接使用辅助工具库。总而言之,按需拷贝);二是无法实现函数的拷贝。