浅谈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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
如何实现一个webpack模块解析器
Oct 24 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
关于时间计算的结总
2006/12/06 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
ext jquery 简单比较
2010/04/07 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Ajax基础知识详解
2017/02/17 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
初婚未育证明
2014/01/15 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
财务总监岗位职责
2015/02/03 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP