JavaScript对象之深度克隆介绍


Posted in Javascript onDecember 08, 2014

也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆。看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业的词汇稍加修饰,就变得神秘起来了。

首先为什么要将一个对象进行深克隆?请允许我进行一个猜测:你有时一定会认为js的内置对象document太长,那么你可能会这样做:

var d = document;

d.by = function(id){

    return d.getElementById(id);

};

d.by('id').innerHTML = 'hello sentsin';

上述代码对document.getElementById进行了简化,同时在原document对象中也增加了一个by的成员方法,你可以通过document.hasOwnProperty('by')返回的状态值来验证你的判断。再看下面一个例子。

var person = {name: '贤心', profession: '前端开发', place: '杭州'};

var newPerson = person;

newPerson.age = '24';

console.log(person);

//结果:{name: '贤心', profession: '前端开发', place: '杭州', age: 24}

由此可见,将一个对象通过简单的传递给一个新的变量时,仅仅只是给该对象增添了一个别名。这意味着,通过对该别名的操作,原有对象键值会发生改变。但问题在于,有时我们希望newPerson完全独立于person,彼此之间不存在同步关系,那么就需要生成一个副本,请看例子:

var cloneObj = function(obj){

    var str, newobj = obj.constructor === Array ? [] : {};

    if(typeof obj !== 'object'){

        return;

    } else if(window.JSON){

        str = JSON.stringify(obj), //系列化对象

        newobj = JSON.parse(str); //还原

    } else {

        for(var i in obj){

            newobj[i] = typeof obj[i] === 'object' ? 

            cloneObj(obj[i]) : obj[i]; 

        }

    }

    return newobj;

};


//测试

var obj = {a: 0, b: 1, c: 2};

var arr = [0, 1, 2];

//执行深度克隆

var newobj = cloneObj(obj);

var newarr = cloneObj(arr);

//对克隆后的新对象进行成员删除

delete newobj.a;

newarr.splice(0,1);

console.log(obj, arr, newobj, newarr);

//结果: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

这便是所谓的对象克隆。不过有几处需要解释一下。代码中的JSON对象及其成员方法stringify和parse属于ECMAScript5规范,它们分别负责将一个对象(包括数组对象)转换成字符串,和还原,从而实现对象的深拷贝。那么对于低级浏览器(如IE),拷贝数组的话,可以用newobj.concat(obj),而普通对象,就索性枚举赋值好了。

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js取模(求余数)隔行变色
May 15 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
javascript轮播图算法
Oct 21 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
Javascript 严格模式use strict详解
Sep 16 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 #Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 #Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 #Javascript
js继承call()和apply()方法总结
Dec 08 #Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解python中的json和字典dict
2018/06/22 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
对python的输出和输出格式详解
2018/12/08 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
早会主持词
2014/03/17 职场文书
安全生产专项整治方案
2014/05/06 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
观看信仰心得体会
2014/09/04 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年派出所工作总结
2015/04/24 职场文书
律师函格式范本
2015/05/27 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
防止web项目中的SQL注入
2021/12/06 MySQL
nginx日志格式分析和修改
2022/04/28 Servers