前言

之前有人问我如何克隆一个JS对象,我当时没答上来;过后我查资料弄懂了这个问题,现在整理成文。

正文

JavaScript的一切实例都是对象,但他们也分为原始类型和引用类型。原始类型对象指的是字符串(String)、数值(Number)、布尔值(Boolean)、undefinednull,引用类型对象指的是数组(Array)、对象(Object)、函数(Function)。
既然对象分为这两类,他们的复制克隆也是有差别的。普通对象存储的是对象的实际数据,而引用对象存储的是对象的引用地址,而把对象的实际内容单独存放。下面我们就来看看他们克隆的区别。

原始类型对象的克隆

字符串的克隆

var x="abc";
var y=x;
y="xyz";alert(x);   // "abc"
alert(y);   // "xyz"

数值的克隆

var x=1;
var y=x;
y=2;alert(x);   // 1
alert(y);   // 2

布尔值的克隆

var x=true;
var y=x;
y=false;alert(x);   // true
alert(y);   // false

我们可以看出来原始类型的克隆很简单,只需要一个=赋值就可以了;undefinednull也是同理。

引用类型的对象克隆

数值的克隆

如果采用普通克隆:

var x=[1,2];
var y=x;
y.push(3);alert(x);   // 1,2,3
alert(y);   // 1,2,3

由上可知,原始数组x,克隆数组y,修改了克隆数组y,但也同时修改了原始数组x,这就是引用对象的特点。那么怎样才能达到完整的数组克隆呢?

var x=[1,2];
var y=[];
var i=0;
var j=x.length;
for(;i<j;i++){y[i]=x[i];
}
y.push(3);console.log(x);   // [1,2]
console.log(y);   // [1,2,3]

这样,两个数值就互不干扰,实现了完整数组克隆。

对象的克隆

和数组的克隆同理,对象的完整克隆如下:

var x={a:2,b:4};
var y={};
var i;
for(i in x){y[i]=x[i];
}
y.c=6;console.log(x);   // Object {a: 2, b: 4}
console.log(y);   // Object {a: 2, b: 4, c: 6}

函数的克隆

var x=function(){alert(1);};
var y=x;
y=function(){alert(2);};console.log(x);   // function(){alert(1);};
console.log(y);   // function(){alert(2);};

函数的克隆与原始类型对象克隆的方式类似;只需要使用=就可以了。

总结

根据上面的情况,另外,克隆引用对象必须采用完整克隆(深度克隆),包括对象的值也是一个对象也要进行完整克隆(深度克隆)。所以,我们可以总结并封装一个通用的克隆方法:

function clone(obj){var o,i,j,k;if(typeof(obj)!=="object" || obj===null)return obj;if(obj instanceof Array){o=[];i=0;j=obj.length;for(;i<j;i++){if(typeof(obj[i])==="object" && obj[i]!=null){o[i]=clone(obj[i]);}else{o[i]=obj[i];}}}else{o={};for(i in obj){if(typeof(obj[i])==="object" && obj[i]!==null){o[i]=clone(obj[i]);}else{o[i]=obj[i];}}}return o;
}

最后

这是我个人的博客,刚刚搭建好,欢迎大家来看看:Sunny的博客

JavaScript对象克隆相关推荐

  1. 如何正确克隆JavaScript对象?

    我有一个对象x . 我想将其复制为对象y ,以使对y更改不会修改x . 我意识到,复制从内置JavaScript对象派生的对象将导致额外的不需要的属性. 这不是问题,因为我正在复制自己的文字构造对象之 ...

  2. Java学习总结:34(对象克隆)

    对象克隆 对象克隆就是对对象的复制操作,在Object类中存在一个clone()方法用于对象的克隆操作.该方法如下: protected Object clone() throws CloneNotS ...

  3. 如何获取HTML元素对应JavaScript对象?

    <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...

  4. JavaScript对象,方括号和算法

    by Dmitri Grabov 德米特里·格拉波夫(Dmitri Grabov) JavaScript对象,方括号和算法 (JavaScript Objects, Square Brackets a ...

  5. public接口可以被任何一个类实现_一文带你深入Java核心技术:对象克隆+接口与回调,还有这种操作...

    对象克隆 当拷贝一个变量时,原始变量与拷贝变量引用同一个对象,如图6-1所示.这就是说,改变一个变量所引用的对象将会对另一个变量产生影响. Employee original = new Employ ...

  6. java对象序列化克隆_JAVA 对象克隆和序列化

    先用一个例子来说明假克隆吧,也就是用"="之后的效果.. [运行结果]: [运行结果] 姓名:rollen年龄:20 姓名:hello world年龄:100 姓名:hello w ...

  7. 我对javascript对象的理解

    前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...

  8. 《JavaScript启示录》——1.21 JavaScript对象和Object()对象

    本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.21节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查 ...

  9. 《JavaScript启示录》——第1章 JavaScript对象 1.1创建对象

    本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.1节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...

最新文章

  1. vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉
  2. Quartz 定时任务(Scheduler)的 3 种实现方式
  3. easyui-textbox锁定按钮不锁定_不放水了!湖人G5改穿曼巴球衣,热火输定了,詹姆斯提前锁定FMVP!...
  4. 怎么创建计算机快捷方式到桌面两种方法,使用脚本主机创建Windows快捷方式 - Windows Client | Microsoft Docs...
  5. 【C语言】一元二次方程(求实根和虚根)
  6. Pentium 4处理器架构/微架构/流水线 (11) - NetBurst执行核详解 - Load/Store操作/存储转发
  7. Activity生命周期(二)
  8. python里turtle.circle什么意思_Python turtle.circle方法代碼示例
  9. influxdb tsm文件_Influxdb中TSM文件结构解析之读写TSM
  10. atitit.attilax.com产品 软件项目通用框架类库总结
  11. 旅行商问题(TSP) 中国34个城市 经纬度平面坐标
  12. jmeter下载安装教程
  13. 网页只有在服务器上才能打开,为什么你的电脑只能上QQ,而打不开网页?我来告诉你...
  14. 第一次学游泳技巧_第一次学游泳怎么浮起来
  15. vue-router 报NavigationDuplicated: Navigating to current location问题解决
  16. Windows10系统安装postgreSQL出错解决方法
  17. 方案详解|AARRR+八角行为分析=用游戏化思维实现用户增长
  18. Java实现人民币大写+GUI界面
  19. 哈工大车万翔:ChatGPT时代,NLPer 的危与机
  20. byr论坛灌水小工具

热门文章

  1. MPLS的简单配置4
  2. Cisco IOS的故障恢复方法
  3. 数字资产云交易所搭建开发平台,云交易的优势在哪?
  4. 实现apply call 方法
  5. 天猫全球狂欢夜,我竟然被这个“不是人”的家伙给圈了粉!
  6. 第1条:考虑用静态工厂方法代替构造器
  7. project02 U盘系统与排错系统
  8. 【转】Android中dp,px,sp概念梳理以及如何做到屏幕适配
  9. Hadoop源代码分析(包mapreduce.lib.input)
  10. 如何安装系统认证签名过的APK