浅谈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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php简单日历函数
2015/10/28 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python中django学习心得
2017/12/06 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
网络技术专业求职信
2014/02/18 职场文书
国培计划培训感言
2014/03/11 职场文书
公司请假条格式
2014/04/11 职场文书
2015年女生节活动总结
2015/02/27 职场文书
个人求职信格式范文
2015/03/20 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
七年级作文之冬景
2019/11/07 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android