浅谈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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
页面使用密码保护代码
Apr 10 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
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数组添加元素方法小结
2014/12/20 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python实现kMeans算法
2017/12/21 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
旅游管理专业学生求职信
2013/09/28 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
安全检查汇报材料
2014/12/26 职场文书
监考失职检讨书
2015/01/26 职场文书
垂直极限观后感
2015/06/08 职场文书
食品卫生管理制度
2015/08/06 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
手写实现JS中的new
2021/11/07 Javascript