JavaScript对象克隆
前言
之前有人问我如何克隆一个JS对象,我当时没答上来;过后我查资料弄懂了这个问题,现在整理成文。
正文
JavaScript的一切实例都是对象,但他们也分为原始类型和引用类型。原始类型对象指的是字符串(String
)、数值(Number
)、布尔值(Boolean
)、undefined
、null
,引用类型对象指的是数组(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
我们可以看出来原始类型的克隆很简单,只需要一个=
赋值就可以了;undefined
、null
也是同理。
引用类型的对象克隆
数值的克隆
如果采用普通克隆:
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对象克隆相关推荐
- 如何正确克隆JavaScript对象?
我有一个对象x . 我想将其复制为对象y ,以使对y更改不会修改x . 我意识到,复制从内置JavaScript对象派生的对象将导致额外的不需要的属性. 这不是问题,因为我正在复制自己的文字构造对象之 ...
- Java学习总结:34(对象克隆)
对象克隆 对象克隆就是对对象的复制操作,在Object类中存在一个clone()方法用于对象的克隆操作.该方法如下: protected Object clone() throws CloneNotS ...
- 如何获取HTML元素对应JavaScript对象?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- JavaScript对象,方括号和算法
by Dmitri Grabov 德米特里·格拉波夫(Dmitri Grabov) JavaScript对象,方括号和算法 (JavaScript Objects, Square Brackets a ...
- public接口可以被任何一个类实现_一文带你深入Java核心技术:对象克隆+接口与回调,还有这种操作...
对象克隆 当拷贝一个变量时,原始变量与拷贝变量引用同一个对象,如图6-1所示.这就是说,改变一个变量所引用的对象将会对另一个变量产生影响. Employee original = new Employ ...
- java对象序列化克隆_JAVA 对象克隆和序列化
先用一个例子来说明假克隆吧,也就是用"="之后的效果.. [运行结果]: [运行结果] 姓名:rollen年龄:20 姓名:hello world年龄:100 姓名:hello w ...
- 我对javascript对象的理解
前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...
- 《JavaScript启示录》——1.21 JavaScript对象和Object()对象
本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.21节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
- 《JavaScript启示录》——第1章 JavaScript对象 1.1创建对象
本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.1节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
最新文章
- vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉
- Quartz 定时任务(Scheduler)的 3 种实现方式
- easyui-textbox锁定按钮不锁定_不放水了!湖人G5改穿曼巴球衣,热火输定了,詹姆斯提前锁定FMVP!...
- 怎么创建计算机快捷方式到桌面两种方法,使用脚本主机创建Windows快捷方式 - Windows Client | Microsoft Docs...
- 【C语言】一元二次方程(求实根和虚根)
- Pentium 4处理器架构/微架构/流水线 (11) - NetBurst执行核详解 - Load/Store操作/存储转发
- Activity生命周期(二)
- python里turtle.circle什么意思_Python turtle.circle方法代碼示例
- influxdb tsm文件_Influxdb中TSM文件结构解析之读写TSM
- atitit.attilax.com产品 软件项目通用框架类库总结
- 旅行商问题(TSP) 中国34个城市 经纬度平面坐标
- jmeter下载安装教程
- 网页只有在服务器上才能打开,为什么你的电脑只能上QQ,而打不开网页?我来告诉你...
- 第一次学游泳技巧_第一次学游泳怎么浮起来
- vue-router 报NavigationDuplicated: Navigating to current location问题解决
- Windows10系统安装postgreSQL出错解决方法
- 方案详解|AARRR+八角行为分析=用游戏化思维实现用户增长
- Java实现人民币大写+GUI界面
- 哈工大车万翔:ChatGPT时代,NLPer 的危与机
- byr论坛灌水小工具