JavaScript 深层克隆对象详解及实例


Posted in Javascript onNovember 03, 2016

 JavaScript 深层克隆对象

今天做项目,有个需求需要用到深层克隆对象,并且要求在原型链上编程 于是心血来潮索性来复习一下这个知识点,在网上找了相应的知识,

克隆对象,这名词看着高大上,其实也没什么,便是拷贝一个长的一模一样的对象
也许有初学的小伙伴在想,那还不简单么,so easy

var obj1 = {name: 'payen'};

var obj2 = obj1;

这可并不是克隆对象,obj1和obj2根本就是同一个对象,

他俩指向同一个内存地址空间,拿到了同样的一个小房子

这是应为对象是引用值

说到引用值

JavaScript中引用值只有对象

这里注意,数组是特殊的对象,函数也是特殊的可执行对象, 也就是说,它们也是对象 ,所谓深层克隆对象就是说它并不想要同样的房子,房子你也要给我复制一份一模一样的 不知道我这么说大家能不能理解= ̄ω ̄= ,也就是深层克隆对象引用值要拷贝,而相对的浅层克隆对象只要把那个引用值拿过来就好了 ,不明白不要紧,看完代码就理解了

首先来一起看看浅层克隆对象吧

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true
  }
}
function easyClone(obj){
  var newObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
var newHouse = easyClone(house);

不要吐槽我用easy,一时想不起来“浅”英文咋说来着(真不知道我英语六级怎么过的) 。关于那个for-in有一个小性能问题,感兴趣的童鞋可以看看我的另一篇文章

这段代码很简单我就不多解释了

来看看chrome控制台

JavaScript 深层克隆对象详解及实例

看样子很棒的样子

那么我现在做一件事

给新房子加一个人

JavaScript 深层克隆对象详解及实例

看来这个”新房子”并不新啊,不要被变量名字迷惑了所以,有引用值出现,浅层克隆并不好用了

既然如此,我们怎么办呢

既然要得到新的对象,我们创建一个新对象,把旧对象内部的东西,再拷贝到新对象不就得了

还有一个问题如果对象里还有对象呢

那么就继续重复创建添加的过程,很显然是一个循环的过程

不过循环有两种

迭代

递归

毫无疑问递归更胜一筹

在递归循环中,遇到满足终止条件的条件时逐层返回来结束 ,那么我们就可以通过递归逐层查找引用值,直到没有引用值为止
还是看代码吧

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
function deepClone(original, target){
  var target = target || {};// 如果target为undefined或没传参,设置空对象
  for(var prop in original){// 遍历原对象
    if(original.hasOwnProperty(prop)){// 只拷贝对象内部,不考虑原型链
      if(typeof original[prop] === 'object'){// 引用值
        if(Object.prototype.toString.call(original[prop]) === '[object Array]'){
          target[prop] = [];// 处理数组引用值
        }else{
          target[prop] = {};// 处理对象引用值
        }// 可以用三目运算符
        deepClone(original[prop],target[prop]);// 递归克隆
      }else{// 基本值
        target[prop] = original[prop];
      }  
    }
  }
  return target;
}
var newHouse = deepClone(house);

上面写了那个if-else挺适合用三目运算符的,不过我感觉太冗长了,强迫症表示看了很不舒服 ,为了证明它真的深层克隆了,我特意把原始房子变复杂了 ,(我们不考虑函数的深层克隆,麻烦并且意义不大) ,这回它真的是新房子了

JavaScript 深层克隆对象详解及实例

我就不展开了

可以看出来在新对象的引用值改动,旧对象并没有变

在原型链上编程同理

var house = {
  name: 'payen',
  people: {
    father: true,
    mother: true,
    child: {
      age: 1
    }
  },
  money: [1000,2000,3000]
}
Object.prototype.cloneTo = function(obj){
  var obj = obj || {};
  for(var prop in this){
    if(this.hasOwnProperty(prop)){
      if(typeof this[prop] === 'object'){
        if(Object.prototype.toString.call(this[prop]) === '[object Array]'){
          obj[prop] = [];
        }else{
          obj[prop] = {};
        }
        this[prop].cloneTo(obj[prop]);
      }else{
        obj[prop] = this[prop];
      }
    }
  }
  return obj;
}
var newHouse = {};
house.cloneTo(newHouse);

感谢阅读,希望能帮到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
理解javascript中的闭包
Jan 11 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
简单学习vue指令directive
Nov 03 #Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 #Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 #Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 #Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
You might like
基于mysql的bbs设计(三)
2006/10/09 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP中“=>
2019/03/01 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
javascrpt密码强度校验函数详解
2020/03/18 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python代码制作configure文件示例
2014/07/28 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
编辑个人求职信范文
2013/09/21 职场文书
标准自荐信范文
2014/01/29 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2014年外联部工作总结
2014/11/17 职场文书
报名委托书
2015/01/29 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
python 详解turtle画爱心代码
2022/02/15 Python