浅克隆与深克隆

浅克隆

浅克隆只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用。
浅克隆会造成藕断丝连，当引用类型的属性值发生改变时，克隆出来的对应的引用类型的属性值也会发生改变。

let obj1={
    a:1,
    b:2,
    c:[1,2,3],
    d:{
      name:"daitou",
      age:18
    }
  }
  let obj2={}
  for(let key in obj1){
    obj2[key] = obj1[key];
  }
  obj1.c.push(4);
  console.log(obj1.c==obj2.c);  //true 
  console.log(obj1===obj2);    //false
  console.log(obj2.c)  //1,2,3,4

深克隆

克隆对象的全貌，不论对象的属性值是否又是引用类型值，都能将它们实现克隆。并且不会出现藕断丝连的情况。

let obj1={
      a:1,
      b:2,
      c:[1,2,3,4],
      d:{
          name:"daitou",
          age:18,
      }
  }
  function deepClone(objOrArray){
      let result;
      if(Array.isArray(objOrArray)){
           result = [];
          for(let i=0;i<objOrArray.length;i++){
                result.push(deepClone(objOrArray[i]));
          }
      }else if(typeof objOrArray == 'object'){
          result = {};
          for(let key in objOrArray){
              result[key] = deepClone(objOrArray[key]) ;
          }
      }else{
          //基本数据类型
          result = objOrArray;
      }
      return result;
  }
  let obj2 = deepClone(obj1);
  console.log(obj1.c==obj2.c); //false
  console.log(obj1.c===obj2.c); //false
  console.log(obj1.d==obj2.d);  //false
  console.log(obj1 == obj2);  //false
  obj1.c.push(5);
  console.log("obj2.c:",obj2.c);
  console.log("obj1.c:",obj1.c);
  obj2.d.sex="男";
  console.log("obj1.d:",obj1.d);
  console.log("obj2.d:",obj2.d);

由结果我们可以看到，当我们进行深克隆时，obj1引用类型属性值发生变化时，obj2的引用类型属性值不会发生变化，不再有藕断丝连的现象