浅谈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基础语法、dom操作树及document对象
Dec 02 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue a标签点击实现赋值方式
Sep 07 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
How do I change MySQL timezone?
2008/03/26 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
React Native预设占位placeholder的使用
2017/09/28 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python 数据加密代码
2008/12/24 Python
Python中的闭包实例详解
2014/08/29 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
安全教育心得体会
2013/12/29 职场文书
应届护士求职信范文
2014/01/26 职场文书
学习经验交流会主持词
2014/04/01 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
优秀教师事迹材料
2014/12/15 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
python实现监听键盘
2021/04/26 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Python循环之while无限迭代
2022/04/30 Python