深入理解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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
13个PHP函数超实用
Oct 21 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
指针和引用有什么区别
2013/01/13 面试题
《我不是最弱小的》教学反思
2014/02/23 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
植树节标语
2014/06/27 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书