【深拷贝/浅拷贝】javascript的深拷贝和浅拷贝 分类： js javascript深拷贝 深拷贝浅拷贝 javascript 2015-08-10 11:29 7人阅读 评论(0) 收藏

javascript 中 对于对象和数组而言，用 = 做的简单赋值就是浅拷贝，因为对象和数组在引用赋值的时候传递的只是指针。

1、浅拷贝

var a = 1;
var b = ['1','2',[1,2,3]];
var c = {
	A : 1,
	B : function(tmp1,tmp2){
		return tmp1 - tmp2;
	},
	C : [1,2,['1','2']]
}


var a2 = a;
a2 = 3;

var b2 = b;
b2[2] = '22';

var c2 = c;
c2.A = 'haha';

console.log(a);
console.log(a2);

console.log(b);
console.log(b2);

console.log(c);
console.log(c2);

这个例子中就是一个浅拷贝，对于数组b和对象c而言，

拷贝的数组b2和对象c2，只是传递了指针，

所以 b2[2]=‘22’; 这一句改变了原始数组 b[2] 中的内容，

c2.A = 'haha'; 这一句改变了原始对象 c.A 中的内容，

如果希望的是仅针对拷贝出来的数组b2和对象c2中的内容有所更改，那么就需要用到深拷贝。

2、深拷贝

/*
 * 判断数据类型 v 1.0.0
 * Copyright 2015-08-10 Jane
 *
 * is_obj(source) 判断是否为对象（包括数组），source传递的是需要判断的变量
 * is_arr(source) 判断是否为数组，source传递的是需要判断的变量
 */
var obj_type = {
	is_obj : function(source){
		if(typeof source == 'object'){
			return true;
		}else{
			return false;
		}
	},
	is_arr : function(source){
		var self = this;
		if(self.is_obj(source)){
			if(source instanceof Array){
				return true;
			}else{
				return false;
			}
		}else{
			return false;
		}
	}
}

/*
 * javascript深拷贝 v 1.0.0
 * Copyright 2015-08-10 Jane
 * source 为需要深拷贝的变量
 */
var deep_copy = function(source){
	var result;
	// 如果需要深拷贝的是对象（或数组）
	if(obj_type.is_obj(source)){
		// 如果需要深拷贝的是数组
		if(obj_type.is_arr(source)){
			result = [];
			
			// 遍历该数组，对于数组中每一个值做递归的深拷贝
			for(var i = 0; i < source.length; i++){
				result[i] = deep_copy(source[i]);
			}
		// 如果需要深拷贝的是对象（但不是数组）
		}else{
			result = {};
			
			// 遍历该对象，对于对象中每一个值做递归的深拷贝
			for(var i in source){
				// 对于对象而言，过滤掉原型链上的属性（仅拷贝自定义的属性）
				if(source.hasOwnProperty(i)) {
					result[i] = deep_copy(source[i]);
				}
			}
		}
	// 如果需要深拷贝的不是对象（和数组），那么直接用等号赋值
	}else{
		result = source;
	}
	
	return result;
}

var a = 1;
var b = ['1','2',[1,2,3]];
var c = {
	A : 1,
	B : function(tmp1,tmp2){
		return tmp1 - tmp2;
	},
	C : [1,2,['1','2']]
}

var a2 = deep_copy(a);
var b2 = deep_copy(b);
var c2 = deep_copy(c);
a2 = 3;
b2[1] = '22';
b2[2][2] = '22';
c2.A = 'haha'; 

console.log(a);
console.log(a2);

console.log(b);
console.log(b2);

console.log(c);
console.log(c2);

深拷贝demo下载地址：

http://download.csdn.net/detail/snow_finland/8984215

参考资料：

1、如何判断js中的数据类型

http://blog.sina.com.cn/s/blog_51048da70101grz6.html

2、javascript中的浅拷贝和深拷贝

http://blog.csdn.net/yisuowushinian/article/details/45544343