Js深度克隆解析

Posted 2020-11-19 77days

Js克隆（clone），就是数据拷贝，包括基础类型的数据和引用类型的数据，而深度克隆（deepClone）就是针对引用类型，如数组和对象。

两种拷贝的区别在于：浅拷贝时，拷贝出的对象指向原对象的地址，当其值发生改变时，原对象的值也发生改变；

　　　　　　　　       深度拷贝，拷贝出的对象指向一个新的地址，当其值发生改变时，原对象的值不受影响。

下面列出深度拷贝的代码及其详细注释：

var obj = {//待拷贝的对象
   name:"abc",
   age:"123",
   card:[‘visa‘,‘master‘],
   wife:{
   name:"bcd",
   son:{
     name:"aaa"
   }
   },
   a:function(){}
  }

function deepclone(origin , target){
  var target = target || {},
      tostr = Object.prototype.toString,//使用Object.prototype.toString.call方法进行对象和数组的区分，所以先将其进行存储以便使用
      arr = ‘[object Array]‘;
  for(var prop in origin){
      if(origin.hasOwnProperty(prop)){//防止拷贝的对象从原对象的原型上取值
          if(origin[prop] !== "null" && typeof(origin[prop]) == ‘object‘){//当遍历到的数据为对象或数组时调用Object.prototype.toString.call方法
              if(tostr.call(origin[prop]) == arr){//遍历到数组，创建数组
                  target[prop] = [];
              }else{//遍历到对象，创建对象
                 target[prop] = {};
              }             
              deepclone(origin[prop] , target[prop]);//对遍历到的数组和对象再次深度克隆
         }else{
             target[prop] = origin[prop];//当遍历到的数据为原始值时，直接进行赋值
         }
     }
 }
         return target;
 }

var target;
console.log(deepclone(obj,target));//实现target深度拷贝obj