JS数据类型分为两类: 基本类型(Number、Boolean、Undefined、Null、String、Symbol(ES6新加,此处不讨论))与引用类型(Object)。原始类型存储的是对象的实际数据,而对象类型存储的是对象的引用地址。

两种克隆

  1. 浅克隆: 原始类型为值传递,对象类型仍为引用传递。

  2. 深克隆: 所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

浅克隆

1.对于基本类型:

//数值克隆
var a="1";
var b=a;
b="2";
console.log(a);// "1"
console.log(b);// "2"

2.对于引用类型:

我们都知道,函数在js中属于“一等公民”,同时也是引用类型,但是函数的克隆是通过浅克隆就可以实现,因为函数的克隆会在内存单独开辟一块空间,互不影响

var m=function(){alert(1);};
var n=m;
n=function(){alert(2);}; console.log(m());//1
console.log(n());//2

下面通过一段代码来看浅克隆的问题:

function clone(obj){
var result={};
for(key in obj){
result[key]=obj[key];
}
return result;
} var dog = {
name: '大黄',
age: 8,
hobby: {
food: 'cookie',
toy: 'ball'
}
} var oNew = clone(dog);
console.log(dog.hobby.food); // cookie
oNew.hobby.food = "icecream";
console.log(dog.hobby.food) // icecream

简单的复制对象,如果对象其中一个属性是引用型变量,就会出现这种情况,因为引用型变量保存的是内存地址,所以其实后来操作的都是同一块内存。

深克隆

1.JSON对象的parse和stringify

JSON对象是ES5中引入的新的类型(支持的浏览器为IE8+),JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,也可以实现对象的深复制。

var dog = {
name: '大黄',
age: 8,
hobby: {
food: 'cookie',
toy: 'ball'
}
} var oNew = JSON.parse(JSON.stringify(dog));
console.log(dog.hobby.food); // cookie
oNew.hobby.food = "icecream";
console.log(dog.hobby.food) // cookie

该方法的局限性:

  1. 无法复制函数

  2. 原型链没了,对象就是object,所属的类没了。

2.在jquery中extend方法可以用来扩展对象,这个方法可以传入一个参数:deep(true or false),表示是否执行深复制(如果是深复制则会执行递归复制),此处不细说。

3.自己定义

function deepClone(obj){
var result,
oClass=isClass(obj); if(oClass==="Object"){
result={};
}else if(oClass==="Array"){
result=[];
}else{
return obj;
}
for(key in obj){
var copy=obj[key];
if(isClass(copy)=="Object"){
result[key]=arguments.callee(copy);//递归调用
}else if(isClass(copy)=="Array"){
result[key]=arguments.callee(copy);
}else{
result[key]=obj[key];
}
}
return result;
}
//返回传递给他的任意对象的类
function isClass(o){
if(o===null) return "Null";
if(o===undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}

或者可以写为(只适用引用类型):

Object.prototype.clone = function(){

    var o = this.constructor === Array ? [] : {};

    for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}

JavaScript的深克隆与浅克隆的更多相关文章

  1. Java克隆--深克隆与浅克隆的区别

    克隆,就是复制一个对象的副本,而克隆又分浅克隆和深克隆.浅克隆是指克隆得到的对象基本类型的值改变了,而源对象的值不会变.但如果被克隆对象引用类型的值改变了,那么源对象的值同样会改变,因为引用类型在栈内 ...

  2. 浅谈Java中的深克隆和浅克隆(阿里面试)

    在最近的秋招中,阿里和多益网络都问到了这个问题,虽然很简单,但是我还是想总结一下,感兴趣的可以看一下我的个人博客网站(Spring+MyBatis+redis+nginx+mysql)(适合菜鸟),最 ...

  3. Java中的深克隆和浅克隆

    为什么要克隆 首先思考一个问题, 为什么需要克隆对象? 直接new一个对象不行吗? 克隆的对象可能包含一些已经修改过的属性, 而new出来的对象的属性都还是初始化时候的值, 所以当需要一个新的对象来保 ...

  4. 【java开发系列】—— 深克隆和浅克隆

    Java支持我们对一个对象进行克隆,通常用在装饰模式和原型模式中.那么什么是深克隆,什么是浅克隆呢. [浅克隆],通常只是对克隆的实例进行复制,但里面的其他子对象,都是共用的. [深克隆],克隆的时候 ...

  5. JAVA深克隆与浅克隆1

    复制就是得到一个副本 克隆就是复制一个对象的复本.但一个对象中可能有基本数据类型,如:int,long,float    等,也同时含有非基本数据类型如(数组,集合等)被克隆得到的对象基本类型的值修改 ...

  6. js深克隆与浅克隆

    定义: 浅克隆: 克隆对象的一层属性, 如果对象还有对象的话,里面的对象没有进行克隆,只是把地址给了别人.也可以理解为只是简单的克隆了躯体,但是没有得到其灵魂: 深克隆:克隆对象的多层属性,对象里面还 ...

  7. javascript实现深克隆的几种方法

    1)普通函数实现 function cloneObject(obj) { if (obj === null || typeof obj !== 'object') { return obj; } va ...

  8. java深克隆与浅克隆

    2015.9.19 6:45   星期五    1

  9. java 深克隆(深拷贝)与浅克隆(拷贝)详解

    java深克隆和浅克隆 基本概念 浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所拷贝的对象,而不复制它所引用的对 ...

随机推荐

  1. 解密httpclient,dbcp,jedis,c3p0,druid,okhttp都在使用的连接池技术

    最近在连接池上面栽了个跟头(参见这里),引起我对池技术的强烈关注,这几天总结了一下很多场景都会使用的池技术: 池概念 pool,中文翻译为水池,但是在英文中,还有一种解释是 an organizati ...

  2. 【沙龙报名中】与微信&云开发官方团队零距离互动,揭秘爆款微信小游戏背后的技术!

    有人说 微信小程序游戏的百花齐放 活像十几年前的4399小游戏称霸互联网的景象 " 歪,斗地主吗,三缺二, 不用下app,小程序就能玩,我保证不抢地主让你抢!" ...... &q ...

  3. rem与em的使用和区别

    区别是:浏览器根据谁来转化成px值. 当使用rem单位,转换为像素大小取决于根元素的字体大小,即HTML元素的字体大小. 有一个比较普遍的误解,认为em单位是相对于父元素的字体大小.事实上,根据W3C ...

  4. Ext.net SelectionModel RowSelection

    <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel1308" runat="se ...

  5. 第十九节:Asp.Net Core WebApi基础总结和请求方式

    一. 基础总结 1.Restful服务改造 Core下的WebApi默认也是Restful格式服务,即通过请求方式(Get,post,put,delete)来区分请求哪个方法,请求的URL中不需要写方 ...

  6. Linux(centOS6.5)安装RabbitMQ

    第一.下载erlang和rabbitmq-server的rpm: wget  http://www.rabbitmq.com/releases/erlang/erlang-19.0.4-1.el7.c ...

  7. maven的pom.xml用<exclusion>解决版本问题

    用maven管理库依赖,有个好处就是连同库的依赖的全部jar文件一起下载,免去手工添加的麻烦,但同时也带来了同一个jar会被下载了不同版本的问题,好在pom的配置里面允许用<exclusion& ...

  8. PIE SDK打开自定义栅格数据

    1. 数据介绍 信息提取和解译的过程中,经常会生成一部分中间临时栅格数据,这些数据在执行完对应操作后就失去了存在的价值,针对这种情况,PIE增加了内存栅格数据集,来协助用户完成对自定义栅格数据的读取和 ...

  9. html、css/bootStrap、js/Jquery、ajax与json数据交互总结

    设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的flo ...

  10. Fiddler模拟响应

    1 启用规则 2 不匹配的规则通过,不勾选会导致不匹配的请求失败 3 匹配url 4 响应信息,Fiddler内置了一些响应脚步,你也可以选择一个保护响应信息的文本文件