浅谈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 trim去空格的最佳实践
Oct 30 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
使用express来代理服务的方法
Jun 21 Javascript
浅谈vuex中store的命名空间
Nov 08 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 explode()函数用法讲解
2019/02/15 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
解析Python中的异常处理
2015/04/28 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
事假请假条范文
2014/04/11 职场文书
实习指导老师评语
2014/04/26 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2016国庆促销广告语
2016/01/28 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
python可视化之颜色映射详解
2021/09/15 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
muduo TcpServer模块源码分析
2022/04/26 Redis