js实例教程-关于js对象克隆的知识讲解

发布时间:2018-11-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-关于js对象克隆的知识讲解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

前几次面试被问到堆存储,栈存储,以及对象的克隆。后来通过查资料,个人理解(成长中……)如下:

分析克隆前,我们需要知道点基础的数据在堆栈中的存储机制:

js中数据类型的分类:1>原始类型(number,boolean,string,null,undefined)2>引用类型(代表object)

堆栈中数据存储的情况:

a. 原始类型的这种变量的名字和对应的值都存储在栈中,克隆时直接就将值也一起克隆过来了。

b. 引用类型的如object,栈中存储的是名字和对应值的地址信息而堆中存放的就是地址对应的值。这也就是为什么,我们直接使用同普通方法一样的克隆(浅克隆),其实我们克隆的是对应的地址并不是真正的值,当我们改变之前对象的属性值时会导致堆中的值变化从而克隆体对应的属性值也跟着变化(绕晕了……)。

浅克隆:

 let obj = {     name:'苍老师',  age: 18,  Size: 'D',  time:{   start:30,   working:60,   end:20   },  factory:function(man){   return man+'film';   }  } let obj_f = obj; console.LOG(obj_f);

执行结果:

继续,改变原体(最初的本体)的属性值->

 obj.time.working=120; console.log(obj,obj_f);

执行结果克隆体也跟着变化:

要想做一个真正的有思想不被他人所牵制也不影响他人的独立自由的个体,那当然是要将本体的所有东西都变成我们自己的了。

接着我们开始制造一台深克隆机器:

 function deepClone(obj){ if(tyPEof obj !== 'object') return obj; VAR _obj = Array.isArray(obj) []:{}; if (typeof obj === 'object'){  for(attr in obj){  if(typeof obj[attr] === 'object'){   _obj[attr] = deepClone(obj[attr]);  }else{   _obj[attr] = obj[attr];  }  } return _obj;  } }

发动机器开始克隆:

 let obj_f = deepClone(obj); console.log(obj_f);

克隆的克隆体:

这家伙好像和普通的克隆也没啥不一样,但是他现在已经是一个独立的对象了,客官里面请:

 obj.time.working=120; console.log(obj,obj_f);

有啥不一样:

就是不一样,从此她只为你所用,再也不担心被他人影响了。

前几次面试被问到堆存储,栈存储,以及对象的克隆。后来通过查资料,个人理解(成长中……)如下:

分析克隆前,我们需要知道点基础的数据在堆栈中的存储机制:

js中数据类型的分类:1>原始类型(number,boolean,string,null,undefined)2>引用类型(代表object)

堆栈中数据存储的情况:

a. 原始类型的这种变量的名字和对应的值都存储在栈中,克隆时直接就将值也一起克隆过来了。

b. 引用类型的如object,栈中存储的是名字和对应值的地址信息而堆中存放的就是地址对应的值。这也就是为什么,我们直接使用同普通方法一样的克隆(浅克隆),其实我们克隆的是对应的地址并不是真正的值,当我们改变之前对象的属性值时会导致堆中的值变化从而克隆体对应的属性值也跟着变化(绕晕了……)。

浅克隆:

 let obj = {     name:'苍老师',  age: 18,  size: 'D',  time:{   start:30,   working:60,   end:20   },  factory:function(man){   return man+'film';   }  } let obj_f = obj; console.log(obj_f);

执行结果:

继续,改变原体(最初的本体)的属性值->

 obj.time.working=120; console.log(obj,obj_f);

执行结果克隆体也跟着变化:

要想做一个真正的有思想不被他人所牵制也不影响他人的独立自由的个体,那当然是要将本体的所有东西都变成我们自己的了。

接着我们开始制造一台深克隆机器:

 function deepClone(obj){ if(typeof obj !== 'object') return obj; var _obj = Array.isArray(obj) []:{}; if (typeof obj === 'object'){  for(attr in obj){  if(typeof obj[attr] === 'object'){   _obj[attr] = deepClone(obj[attr]);  }else{   _obj[attr] = obj[attr];  }  } return _obj;  } }

发动机器开始克隆:

 let obj_f = deepClone(obj); console.log(obj_f);

克隆的克隆体:

这家伙好像和普通的克隆也没啥不一样,但是他现在已经是一个独立的对象了,客官里面请:

 obj.time.working=120; console.log(obj,obj_f);

有啥不一样:

就是不一样,从此她只为你所用,再也不担心被他人影响了。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-关于js对象克隆的知识讲解全部内容,希望文章能够帮你解决js实例教程-关于js对象克隆的知识讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。