浅谈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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vue基础配置讲解
Nov 29 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js正则表达式简单校验方法
Jan 03 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python实现自动更换ip的方法
2015/05/05 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
python字典的常用操作方法小结
2016/05/16 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python基于当前时间批量创建文件
2020/05/07 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
工程业务员工作职责
2013/12/07 职场文书
美容院考勤制度
2014/01/30 职场文书
道路建设实施方案
2014/03/18 职场文书
企业授权委托书范本
2014/04/02 职场文书
软件项目实施计划书
2014/05/02 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python