JavaScript深拷贝实现
在实际开发当中,我们经常会遇到要对对象进行深拷贝的情况。而且深拷贝这个问题在面试过程中也经常会遇到,下面就对本人在学习过程中的收获,做以简单的总结。
什么是浅拷贝,什么是深拷贝?
什么是浅拷贝
关于浅拷贝的概念,我在网上看到一种说法,直接上代码。
|
|
但是我个人认为,上面这个根本不涉及拷贝,只是一个简单的引用赋值。以我的理解,浅拷贝应该是不考虑对象的引用类型的属性,只对当前对象的所有成员进行拷贝,代码如下:
|
|
上面这段代码中,person
对象拥有两个基本类型的属性name
和age
,一个引用类型的属性car
,当使用如上方法进行拷贝的时候,name
和age
属性会被正常的拷贝,但是car
属性,只会进行引用的拷贝,这样会导致拷贝出来的对象personCopy
和person
会共用一个car
对象。这样就是所谓的浅拷贝。
什么是深拷贝
深拷贝的就是在拷贝的时候,需要将当前要拷贝的对象内的所有引用类型的属性进行完整的拷贝,也就是说拷贝出来的对象和原对象之间没有任何数据是共享的,所有的东西都是自己独占的一份。
如何实现深拷贝
实现深拷贝需要考虑的问题
实现深拷贝需要考虑如下几个因素:
- 传入的对象是使用对象字面量
{}
创建的对象还是由构造函数生成的对象 - 如果对象是由构造函数创建出来的,那么是否要拷贝原型链上的属性
- 如果要拷贝原型链上的属性,那么如果原型链上存在多个同名的属性,保留哪个
- 处理循环引用的问题
第三方库实现深拷贝
我们可以通过$.extend()</code>方法来完成深复制。值得庆幸的是,我们在<code>jQuery</code>中可以通过添加一个参数来实现递归<code>extend</code>。调用<code>$.extend(true, {}, ...)
就可以实现深复制,参考下面的例子:
|
|
但是jQuery的这个$.extend()</code>方法,有弊端,什么弊端呢?我们看下面的例子:<br></p><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code" style="width: 647.5px;"><pre style="width: 647.5px;"><div class="line"><span class="keyword">var</span> objA = {};</div><div class="line"><span class="keyword">var</span> objB = {};</div><div class="line"></div><div class="line">objA.b = objB;</div><div class="line">objB.a = objA;</div><div class="line"></div><div class="line">$.extend(true,{},a);
也就是说,jQuery中的$.extend()
并没有处理循环引用的问题。
使用JSON对象实现深拷贝
使用JSON
全局对象的parse
和stringify
方法来实现深复制也算是一个简单讨巧的方法。
|
|
然而使用这种方法会有一些隐藏的坑,它能正确处理的对象只有 Number
, String
, Boolean
, Array
, 扁平对象,即那些能够被 json 直接表示的数据结构。
自己造轮子
下面我们给出一个简单的解决方案,当然这个方案是参考别人的方式来实现的。希望对大家有用。
|
|