码迷,mamicode.com
首页 > Web开发 > 详细

Js深度克隆解析

时间:2018-06-18 22:18:23      阅读:432      评论:0      收藏:0      [点我收藏+]

标签:[]   类型   TE   else   cti   注释   div   func   tostring   

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

 

Js深度克隆解析

标签:[]   类型   TE   else   cti   注释   div   func   tostring   

原文地址:https://www.cnblogs.com/77days/p/9196243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!