浅谈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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
超简单的微信小程序轮播图
Nov 22 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php远程下载类分享
2016/04/13 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
用jscript实现新建word文档
2007/06/15 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
很可爱的输入框
2008/08/03 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python 日志 logging模块详细解析
2020/03/31 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
领导干部作风建设工作总结
2014/10/23 职场文书
2015年售票员工作总结
2015/04/29 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript