浅谈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级联下拉列表实例代码(自写)
May 10 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
React实现轮播效果
Aug 25 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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
Yii框架form表单用法实例
2014/12/04 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Angular路由简单学习
2016/12/26 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
python简单实现基数排序算法
2015/05/16 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
安全责任书怎么写
2014/07/28 职场文书
施工安全协议书范本
2014/09/26 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
校长师德表现自我评价
2015/03/05 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
golang生成并解析JSON
2022/04/14 Golang