浅谈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 validate使用攻略 第四步
Jul 01 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vuex存储token示例
Nov 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
function.inc.php超越php
2006/12/09 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
vue中activated的用法
2021/01/03 Vue.js
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python中的各种装饰器详解
2015/04/11 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python iter()函数用法实例分析
2018/03/17 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python 实现list或string按指定分段
2019/12/25 Python
详解django中Template语言
2020/02/22 Python
python实现交并比IOU教程
2020/04/16 Python
python 贪心算法的实现
2020/09/18 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
党员实事承诺书
2014/03/26 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
班主任对学生的评语
2014/04/26 职场文书
初中家长评语大全
2014/12/26 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android