浅拷贝与深拷贝的理解与机制_深拷贝浅拷贝原理

一、对象拷贝的定义理解

           对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的，主要是为了在新的上下文环境中复用对象的部分或全部 数据。JavaScript中有两种类型的对象拷贝：浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。

        其实：浅拷贝就比如像引用类型，而深拷贝就比如值类型

---

二、浅拷贝与深拷贝的定义

          浅拷贝是指源对象与拷贝对象共用一份实体，仅仅是引用的变量不同（名称不同）。对其中任何一个对象的改动都会影响另外一个对象。举个例子，一个人一开始叫张三，后来改名叫李四了，可是还是同一个人，不管是张三缺胳膊少腿还是李四缺胳膊少腿，都是这个人倒霉。

        深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。举个例子，一个人名叫张三，后来用他克隆（假设法律允许）了另外一个人，叫李四，不管是张三缺胳膊少腿还是李四缺胳膊少腿都不会影响另外一个人。比较典型的就是Value（值）对象，如预定义类型Int32，Double，以及结构（struct），枚举（Enum）等。

---

三、深拷贝与浅拷贝的区别

          深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。

---

四、浅拷贝与深拷贝的机制原理

        浅拷贝 ------  只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。

        深拷贝 -------  在计算机中开辟了一块新的内存地址用于存放复制的对象

---

五、浅拷贝实例代码

     5.1、简单的引用复制

//此递归方法不包含数组对象
var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);
console.log(shallowObj.a === obj.a);   // true
 
function shallowCopy(src) {
  var newobj = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      newobj[prop] = src[prop];
    }
  }
  return newobj;
}

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

  5.2、Object.assign()

         Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。Object.assign会跳过那些值为 null 或 undefined 的源对象。

var x = { 
         a: 1, 
         b: { f: { g: 1 } }, 
         c: [ 1, 2, 3 ] 
    }; 
var y = Object.assign({}, x);
console.log(y.b.f === x.b.f);  // true 

---

六、深拷贝的实例代码

      6.1、Array的slice()和concat()方法

Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。之所以把它放在深拷贝里，是因为它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝：

• 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
• 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响。例子如下：

var array = [1,2,3];  
var array_shallow = array;  
var array_concat = array.concat();  
var array_slice = array.slice(0); 
 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false，“看起来”像深拷贝 
console.log(array === array_concat); //false，“看起来”像深拷贝 

     6.2、JSON对象的parse和stringify

         JSON对象是ES5中引入的新的类型（支持的浏览器为IE8+），JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串，借助这两个方法，也可以实现对象的深拷贝。

//例1 
var source = { 
        name:"source",
        child:{ name:"child" }
     }  
var target = JSON.parse(JSON.stringify(source)); 
 
target.name = "target"; //改变target的name属性 
console.log(source.name); //source  
console.log(target.name); //target 
target.child.name = "target child"; //改变target的child  
console.log(source.child.name); //child  
console.log(target.child.name); //target child 
 
 
//例2 
var source = {
         name:function(){
            console.log(1);
         }, 
        child:{ 
            name:"child" 
        } 
}  
var target = JSON.parse(JSON.stringify(source)); 
console.log(target.name); //undefined 
 
 
//例3 
var source = { 
        name:function(){
            console.log(1);
        }, 
        child:new RegExp("e") 
    } 
var target = JSON.parse(JSON.stringify(source)); 
console.log(target.name); //undefined 
console.log(target.child); //Object {} 
 
 

说明：这种方法使用较为简单，可以满足基本的深拷贝需求，而且能够处理JSON格式能表示的所有数据类型，但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。还有一点不好的地方是它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。

      6.3、JQuery的$exentd（）   注意使用合并返回值

// 例子1
var a={"name":"aaa"}; 
var b={"name":"bbb"}; 
 
a.child=b; 
b.parent=a; 
$.extend(true,{},a);//直接报了栈溢出。Uncaught RangeError: Maximum call stack size exceeded 
 
 
// 例子2 
let newObj = $.extend(true,{},partcontent);

说明：jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝，但是这个方法也无法处理源对象内部循环引用

     6.4、分别存储到不同的内存地址，两边值的改变互不影响。

var obj = { 
    a:1, 
    arr: [1,2]，
    nation : '中国',
    birthplaces:['北京','上海','广州']
};
var obj2 = {name:'杨'};
obj2 = deepCopy(obj,obj2);
console.log(obj2);
//深复制，要想达到深复制就需要用递归
function deepCopy(o,c){
   var c = c || {}；
   for(var i in o){
   if(typeof o[i] === 'object'){
          //要考虑深复制问题了
          if(o[i].constructor === Array){
            //这是数组
            c[i] =[]；
          }else{
            //这是对象
            c[i] = {}；
          }
          deepCopy(o[i],c[i])；
        }else{
          c[i] = o[i]；
        }
     }
     return c
 }

原理如下面的示意图所示：