浅谈Javascript中深复制


Posted in Javascript onDecember 01, 2014

在javascript中,所有的object变量之间的赋值都是传地址的,可能有同学会问哪些是object对象。举例子来说明可能会比较好:

typeof(true)    //"boolean"

typeof(1)       //"number"

typeof("1")     //"string"

typeof({})      //"object"

typeof([])      //"object"

typeof(null)    //"object"

typeof(function(){})  //"function"

所以其实我们深复制主要需要处理的对象就是object对象,非object对象只要直接正常的赋值就好。我实现js深复制的思路就是:

遍历所有该对象的属性,
如果该属性是"object"则需要特殊处理,
如果这个object对象比较特殊,是一个数组,那就创建一个新的数组并深复制数组里的元素
如果这个object对象是个非数组对象,那直接再对它递归调用深复制方法即可。
如果不是"object",则直接正常复制就行。

下面就是我的实现了:

Object.prototype.DeepCopy = function () {

  var obj, i;

  obj = {};
  for (attr in this) {

    if (this.hasOwnProperty(attr)) {

      if (typeof(this[attr]) === "object") {

        if (this[attr] === null) {

          obj[attr] = null;

        }

        else if (Object.prototype.toString.call(this[attr]) === '[object Array]') {

          obj[attr] = [];

          for (i=0; i<this[attr].length; i++) {

            obj[attr].push(this[attr][i].DeepCopy());

          }

        } else {

          obj[attr] = this[attr].DeepCopy();

        }

      } else {

        obj[attr] = this[attr];

      }

    }

  }

  return obj;

};

如果浏览器支持ECMAScript 5的话,为了深复制对象属性的所有特性,可以使用

Object.defineProperty(obj, attr, Object.getOwnPropertyDescriptor(this, attr));

来替代

obj[attr] = this[attr];

直接在Object.prototype上实现该方法的好处是,所有对象都会继承该方法。坏处是某些库也会改写Object对象,所以有时会发生冲突。这是需要注意的。具体使用方法如下:

Object.prototype.DeepCopy = function () { ... }

var a = { x:1 };

var b = a;

var c = a.DeepCopy();

a.x = 2;

b.x = 3;

console.log(a.x);   //3

console.log(b.x);   //3

console.log(c.x);   //1

以上就是关于深复制的讲解了,不过今天既然我们讲了深复制,那么想对应的还有浅复制,我们就来简单总结下他们之间的异同吧。

浅复制(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用.
深复制(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的.

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 #Javascript
关于javascript模块加载技术的一些思考
Nov 28 #Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 #Javascript
关于编写性能高效的javascript事件的技术
Nov 28 #Javascript
推荐25个超炫的jQuery网格插件
Nov 28 #Javascript
实例分析javascript中的call()和apply()方法
Nov 28 #Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
由php if 想到的些问题
2008/03/22 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现udp数据报传输的方法
2014/09/26 Python
python re模块findall()函数实例解析
2018/01/19 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python实现数字的格式化输出
2020/08/01 Python
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
Internal修饰符有什么含义
2013/07/10 面试题
企业车辆管理制度
2014/01/24 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
委托书英文
2015/01/28 职场文书
新员工试用期自我评价
2015/03/10 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python