浅谈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 统计时间
Mar 09 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
js实现随机点名器精简版
Jun 29 Javascript
原生js实现简单轮播图
Oct 26 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 金额数字转换成英文
2010/05/06 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python实现图片中文字分割效果
2019/07/22 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
物流合作计划书
2014/01/10 职场文书
员工评语大全
2014/01/19 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
承诺书范本
2015/01/21 职场文书
认真学习保证书
2015/02/26 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
详解nginx进程锁的实现
2021/06/14 Servers