javascript中的深拷贝和浅拷贝?

我想知道深拷贝和浅拷贝的意思!呃,拷贝 和 克隆是一个意思吧?我搜了很多资料,不知道这样理解是否正确:eg:有A、B两个对象,且都有子对象深拷贝:将B对象拷贝到A对象中,包括B里面的子对象,浅拷贝:将B对象拷贝到A对象中,但不包括B里面的子对象,然而,jQuery.extend() 方法是不是深浅拷贝的一个典型例子?如果是?请问怎么能深拷贝,和浅拷贝?
关注者
461
被浏览
92701

32 个回答

感觉大家好像都没有正面回答题主的问题呢。题主问的是深复制和浅复制的区别,大家答的却都是如何实现深复制。我来答一发~

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

抛开jQuery,上代码例子。下面是一个简单的浅复制实现:

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址,大概的示意图如下。


导致的结果就是:

shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { a:1, arr: [1,2] };
var obj2 = deepCopy(obj);

结果如下面的示意图所示:


需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。

-------- Update 2015.11.1:

之前写了一篇相关的文章《深入剖析 JavaScript 的深复制》。涉及到 jQuery, underscore, lodash 等库关于深复制的实现,有兴趣可以看看。

-------- Update 2016.12.20:

根据 @康恺 的评论,修正了根本性的概念错误。

-------- Update 2017.06.22:

根据 @Paul Yang 的评论,将 "shadow copy" 改为更常见的 "shallow copy"

今天又被面试官问到这个问题了,事后来google一下,知乎这个问题竟然排在第四
=============================================================
var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), //系列化对象
        newobj = JSON.parse(str); //还原
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};

这个函数可以深拷贝 对象和数组