JavaScript的深克隆和浅克隆

最近在复习，发现前端好多知识点牵一发动全身。
比如我想看一下JQuery的extend源码，就不得不再好好看看深克隆浅克隆的问题。 😢😢😢

---

什么是深克隆？

我们都知道，JavaScript有六种基本的数据类型。
五种基本的数据类型：string，number，undefined，boolean，null
（在内存中表现为一个值，保存在栈中）
一种复杂的数据类型（引用类型）：object 【function，array，object】
（在内存中表现为一个指针，保存在堆中）

将一个对象的所有属性均复制，并将该对象与原对象放在内存中不同的位置，此时，改变新对象的属性不会对原对象造成影响，这种行为叫做深克隆。

---

我们还是先看浅克隆吧。。。

    var people= {
        name:"sun",
        age:24,
        hobby:["eat","shopping"],
        son:{
            age:3
        }
    }
//此处为浅克隆
    function extendClone(oldObj) {
        var newObj = {};
        for(var i in oldObj){
            newObj[i] = oldObj[i];
        }
        return newObj;
    }

    console.log(people);
    var people1 = extendClone(people);
    people1.name = "刘某某";
    people1.hobby.push("看剧！");
    console.log(people1);
    var people2 = extendClone(people);
    people2.name = "陈某某";
    people2.hobby.push("游泳！");
    console.log(people2);

看他们的爱好！！.png
浅克隆只是简单的复制对象，若对象其中一个属性是引用值，由于引用型变量保存的是内存的一个地址，所以后来的hobby属性，都指向内存中的同一块地址，最后输出的结果同样相同。
从上面的例子也可以看出，name等原始值的改变，并不会影响原对象中的原始值。

---

解决克隆引用值问题，还是需要深度克隆的！

for-in循环遍历对象上的所有属性，判断是否为引用值，若是，进行递归，直到所有属性都为原始值为止。
拷贝出来后，就是一个全新对像，就和之前没什么关系了，以前的改变也不能对新的产生影响！！

var people= {
        name:"sun",
        age:24,
        hobby:["eat","shopping"],
        son:{
            age:3
        }
    }
    function deepClone(oldObj,newObj){
        var newObj = newObj||{};
        for(var i in oldObj){
            if(typeof oldObj[i]==='object'){
                newObj[i] = (oldObj[i].constructor === Array) ? [] : {};//保存克隆后的引用值
                deepClone(oldObj[i],newObj[i]);
            }else {
                newObj[i] = oldObj[i];
            }
        }
        return newObj;
    }
    console.log(people);
    var people1 = deepClone(people);
    people1.name = "刘某某";
    people1.hobby.push("看剧！");
    console.log(people1);
    var people2 = deepClone(people);
    people2.name = "陈某某";
    people2.hobby.push("游泳！");
    console.log(people2);

看他们的爱好！！.png

---

一些扩展

• concat( )和slice( )
  slice和concat方法都会返回一个新的数组，但是这两个方法对于数组中的对象却没有执行深复制

  var array = [[1,1,1],{name:"syx"},[3,3,3]];
  var arrSlice = array.slice(0,2);
  console.log(array); //[[1,1,1],{name:"syx"},[3,3,3]];
  console.log(arrSlice);  //[[1,1,1],{name:"syx"}]
  

  此时看起来好像是深度拷贝了，但是我们修改name值。。。

  arrSlice[1].name = "SYX";
  console.log(array); //[[1,1,1],{name:"SYX"},[3,3,3]];
  console.log(arrSlice);  //[[1,1,1],{name:"SYX"}]
  

  很容易看出，此时进行的是浅复制
• jQuery.extend( [deep ], target, object1 [, objectN ] )

deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）默认值为false，表示浅拷贝。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数

1.合并两个对象，并修改第一个对象

var a= {
            name:"sun",
            age:24,
            hobby:["eat","shopping"],
            son:{
                age:3
            }
        }
        var b= {
            name:"li",
            age:28,
            hobby:["游泳","看剧"],
            son:{
                age:5
            }
        }
   $.extend(a, b);

b覆盖了a的原有属性.png

2.当继承的对象属性中有引用类型的时候，两个对象同时指向一个对象，改变一个另一个也随之改变。如果有相同属性，后边的会覆盖前边的

var a= {
           name:"sun",
           age:24,
           son:{
               age:3,
               name:"小名"
           }
       }
 var b= {
           son:{
               hobby:'游泳'
           }
       }
$.extend(true,a, b);
console.log(a);

b的新属性添加到了a上.png