深入理解JavaScript中的对象复制(Object Clone)


Posted in Javascript onMay 18, 2016

JavaScript中并没有直接提供对象复制(Object Clone)的方法。因此下面的代码中改变对象b的时候,也就改变了对象a。

a = {k1:1, k2:2, k3:3};

b = a;

b.k2 = 4;

如果只想改变b而保持a不变,就需要对对象a进行复制。

用jQuery进行对象复制

在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制。

a = {k1:1, k2:2, k3:3};

b = {};

$.extend(b,a);

自定义clone()方法来实现对象复制

下面的方法,是对象复制的基本想法。

Object.prototype.clone = function() {
 var copy = (this instanceof Array) ? [] : {};
 for (attr in this) {
  if (!obj.hasOwnProperty(attr)) continue;
  copy[attr] = (typeof this[i] == "object")?obj[attr].clone():obj[attr];
 } 
 return copy;
};


a = {k1:1, k2:2, k3:3};
b = a.clone();

下面的例子则考虑的更全面些,适用于大部分对象的深度复制(Deep Copy)。

function clone(obj) {
  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    var copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    var copy = [];
    for (var i = 0, var len = obj.length; i < len; ++i) {
      copy[i] = clone(obj[i]);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
    var copy = {};
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy obj! Its type isn't supported.");
}

以上这篇深入理解JavaScript中的对象复制(Object Clone)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
javascript实现动态标签云
Oct 16 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
jquery实现上传图片功能
Jun 29 jQuery
vue实现标签云效果的示例
Nov 09 Javascript
js验证框架实现代码分享
May 18 #Javascript
在JavaScript中对HTML进行反转义详解
May 18 #Javascript
深入理解JavaScript中的浮点数
May 18 #Javascript
Node.js返回JSONP详解
May 18 #Javascript
noty ? jQuery通知插件全面解析
May 18 #Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 #Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 #Javascript
You might like
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python psutil模块使用方法解析
2019/08/01 Python
Python with标签使用方法解析
2020/01/17 Python
Python如何省略括号方法详解
2020/03/21 Python
QML用PathView实现轮播图
2020/06/03 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2014年关工委工作总结
2014/11/17 职场文书
杭白菊导游词
2015/02/10 职场文书
校本研修个人总结
2015/02/28 职场文书
教师节老师寄语
2015/05/28 职场文书
学生退学证明
2015/06/23 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
如何通过一篇文章了解Python中的生成器
2022/04/02 Python