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. Java 中 override 和 overload 区别

    问题出现: 即使对于一个经验丰富的开发人员来说,方法重载和方法覆盖的区别都能让他犹豫一下, 对于新手来说,经常容易弄混淆. 有没有比较深入浅出的理解方式,能让人过目不忘,用起来还能有条件反射般的速度呢 ...

  2. 前后台$.post交互并返回JSON对象

    1.前台代码: $.post(url,{"blogId":blogId},function(reData){ if(reData.state=="success" ...

  3. .NET Core:SignalR

    在Startup中的ConfigureServices方法中配置:services.AddSignalR(); 跨域设置中需要更改设置:services.AddCors(options => o ...

  4. ABP vNext中使用开源日志面板 LogDashboard

    ABP vNext 使用 logdashboard 本文示例源码:https://github.com/liangshiw/LogDashboard/tree/master/samples/abpvn ...

  5. lombok的使用以及其中的坑

    1.lombok踩坑与思考 https://www.cnblogs.com/heyonggang/p/8638374.html 2.Lombok介绍.使用方法和总结 https://www.cnblo ...

  6. Phaser铁人三项

    /** * 模拟铁人三项 */ public class PhaserTest { private static Random random = new Random(System.currentTi ...

  7. Luogu P3879 【[TJOI2010]阅读理解】

    前言: 这个题一直有个疑问,最多一千行,每行五千字$1000\times5000=5e6$ $5e6\times26\times4\div1024\div1024\approx496Mb>125 ...

  8. 【转】.Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍.博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  9. SSL证书格式转换

    crt格式转pem openssl x509 -in www.x.com.crt -out www.x.com.pem openssl x509 -in mycert.crt -out mycert. ...

  10. .net 调用 Python脚本中的代码

    使用工具:IronPython 工具介绍:是一种在 .NET 及 Mono上的 Python 实现,是一个开源的项目,基于微软的 DLR 引擎.(个人理解就是在 .net上面运行Python代码) 使 ...