js的浅拷贝和深拷贝的简单理解和使用方法

来源:赵克立 分类: 前端设计 标签:js特效js函数发布时间:2016-12-26 19:11:03浏览:229
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-12-26 19:47:07

使用js对象赋值给另一个变量的时候默认是传的引用,什么是引用呢,通俗一点讲就是传的是一个指针,当你对被赋值的变量进行操作的时候原来的值也会变动.这个时候就需要深拷贝啦,也就是把对象所有属性都复制一份到一个新的对象中再赋值


下面是一个浅拷贝的示例

var a = {  
	name: 'name1'
};
var b = {  
	name: 'name2',
	obj: {
		e: '1',
		f: '2'
	}
};  
function _quanCopy(d) {    
	var c = {};    
	for (var i in d) {      
		c[i] = d[i];    
	}        
	return c; 
}

执行下面代码后输出

var copyb=_quanCopy(b);
copyb.obj='data is mod';
console.log(copyb);
console.log(b);

拷贝b对象然后把其中的一个属性 obj 重新设置成字符串 ,注意obj原来是对 Object 类型数据,输出后没有问题,copyb是一个新的数据更改后对原来的b也不会有任何影响 

blob.png

然后再看下面代码

var copyb=_quanCopy(b);
copyb.obj.e='data is mod';
console.log(copyb);
console.log(b);

代码跟上面一样,唯一不同的是没有直接对 obj这个属性进行重写成字符串而是对它里面的属性进行重新赋值,结果却发现,原来的数据b也被改变啦

blob.png


上面就是浅拷贝的情况,对于一般的字符串数值类型的数据浅拷贝没有问题,但是对一些数组和对象类数据简单的赋值后只是传啦一个指针,包括函数值参数的时候也是这种情况,对象和数组传的是指针


下面是一个深拷贝的示例

//对象深拷贝
var _deepCopy = function(source) {
	var result = {};
	for (var key in source) {
		result[key] = typeof source[key] === 'object' ? _deepCopy(source[key]) : source[key];
	}
	return result;
}

同样的测试代码,使用深拷贝

var copyb=_deepCopy(b);
copyb.obj.e='data is mod';
console.log(copyb);
console.log(b);

blob.png

两个新的对象,对对象的修改也各自独立,实现最终目的


微信号:kelicom QQ交流群:215861553
点击更换验证码
留言