JS完美收官之浅克隆和深克隆

1996年7月5日，在英国爱丁堡市罗斯林研究所出生了一只克隆羊多莉，克隆是生物体通过体细胞进行无性繁殖，最终形成基因完全相同的后代，多莉与多塞特母绵羊具有完全相同的外貌，而我们程序中的克隆跟这类似，就是把一个对象中的属性复制一份放到另一个对象中。

「浅克隆」

什么是浅克隆？浅克隆就是当我把obj{}对象里面的所有属性拷贝到obj1{}中后，然后我分别改变对象里面的变量，原始值互不影响，引用值一个改变，另一个跟着变。

看代码：属性值为原始值拷贝时

var obj = {
       name: '范爷',
       age: 101,
       sex: 'female'
}
var obj1 = {

}
function clone(origin, target) {
          var target = target || {}; //容错处理，如果用户没有传target自动创建
          for (var prop in origin) {
              target[prop] = origin[prop];
         }
            return target;
     }
clone(obj, obj1);

当原始值修改时：

看代码：属性值为引用值拷贝时

var obj = {
      name: '范爷',
      age: 101,
      sex: 'female',
      hobby:["看书","拍电影"]
}
var obj1 = {

}

function clone(origin, target) {
      var target = target || {}; //容错处理，如果用户没有传target自动创建
      for (var prop in origin) {
          target[prop] = origin[prop];
        }
        
      return target;
}

clone(obj, obj1);

当引用值修改时：

JS完美收官之浅克隆和深克隆从执行结果可以看出修改原始值时互不影响，一旦修改引用值时，一个改，另一个跟着变，这就是浅克隆。

「深克隆」（重点是这个）

那什么是深克隆呢？深克隆就是修改引用值时，互不影响，你改我不变。

看代码：

var obj = {
    name: '范爷',
    age: 101,
    sex: 'female',
    hobby:["看书","拍电影"],
    boyfriend:{
          name:"李哥",
          son:{
              name : "李小宝"
              }
          }
}
  
var obj1 = {

}

我们先捋一下深度克隆的过程：

我们要把obj对象拷贝到obj1的对象中，也就是把obj中的属性拷贝到obj1中，属性有原始值和引用值，首先我们得把整个对象遍历一遍，看看里面都有什么类型的值：

「1、遍历对象」

使用for(var prop in obj) 遍历对象

「2、判断是不是原始值，原始值可以直接拷贝，引用值就要进一步处理，引用值又分数组和对象，所以在第二步中判断数组还是对象。」

用typeof()判断结果是不是object，是object就是引用值，反之为原始值

「3、判断是数组还是对象」

有三种方法可以判断数组还是对象，分别是：instanceof、constructor、toString，最好用toString，因为instanceof和constructor存在跨父子域的问题。

「4、建立相应的数组或对象」

「5、递归」

过程捋直了，阔以写代码了：

        var obj = {
            name: '范爷',
            age: 101,
            sex: 'female',
            hobby: ["看书", "拍电影"],
            boyfriend: {
                name: "李哥",
                son: {
                    name: "李小宝"
                }
            }
        }
        
        var obj1 = {

        }

        function deepClone(origin, target) {
            var target = target || {},//容错处理，防止用户不传target值
                toStr = Object.prototype.toString,
                arrAtr = "[object Array]";
            for (var prop in origin) {//遍历对象
                if (origin.hasOwnProperty(prop)) {//防止拿到原型链属性
                    if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') { //判断是不是原始值
                        target[prop]=(toStr.call(origin[prop]) == arrAtr) ? [] : {};  //建立相对应的数组或对象                    
                        deepClone(origin[prop], target[prop])//递归，为了拿到引用值里面还有引用值
                    } else {
                        target[prop] = origin[prop];//是原始值，直接拷贝
                    }
                }
            }
            return target;
        }