深入理解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中的Function.prototye.bind
Jun 25 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
从原生JavaScript到React深入理解
Jul 23 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
做一个有下拉功能的留言版
2006/10/09 PHP
提高网站信任度的技巧
2008/10/17 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
JS中的phototype详解
2017/02/04 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
基于Python实现用户管理系统
2019/02/26 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python数据归一化及三种方法详解
2019/08/06 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
2014民事授权委托书范本
2014/09/29 职场文书
军人离婚协议书样本
2014/10/21 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python