浅谈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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
Vue响应式原理详解
Apr 18 Javascript
vue如何从接口请求数据
Jun 22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php如何获取文件的扩展名
2015/10/28 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
深入理解Node module模块
2018/03/26 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python 文件查找及内容匹配方法
2018/10/25 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python实现维吉尼亚算法
2019/03/20 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
中学家长会邀请函
2014/02/03 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
迎国庆演讲稿
2014/09/15 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
小学运动会报道稿
2015/07/22 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
工厂无线对讲系统解决方案
2022/02/18 无线电