js对象克隆小结

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

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

        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);

有啥不一样:


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

此生得一克隆机害羞

关于克隆大法,今天就到这再见




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值