浅谈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封装的不错的选项卡效果代码
Feb 15 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
详解Vue slot插槽
Nov 20 Vue.js
使用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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python实现划词翻译
2020/04/23 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python实现图片筛选程序
2018/10/24 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
数据员岗位职责
2013/11/19 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
拔河比赛口号
2014/06/10 职场文书
片区教研活动总结
2014/07/02 职场文书
个人租房协议书范本
2014/09/30 职场文书
单位婚育证明范本
2014/11/21 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery