深入理解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中的事件处理
Jan 16 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
来自qq的javascript面试题
Jul 24 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 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
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python运算符重载详解及实例代码
2017/03/07 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
法务专员岗位职责
2015/02/14 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js