浅谈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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
javascript中this指向详解
Apr 23 Javascript
js转html实体的方法
Sep 27 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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写杨辉三角实例代码
2011/07/17 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python入门篇之面向对象
2014/10/20 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python分布式编程实现过程解析
2019/11/08 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
如何查看python关键字
2021/01/17 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
五一促销活动总结
2014/07/01 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
详解Vue router路由
2021/11/20 Vue.js