JS笔记 ( 十五 ) 对象的浅拷贝和深拷贝

---

博主的 Github 地址

---

 
 

1. 浅拷贝

浅拷贝示例函数

function shallow_clone(origin, target){
	var target = target || {}; //防止target传空
	for(var prop in origin){
		target[prop] = origin[prop];
	}
	return target;
}
shallow_clone(dad, son);

效果展示

• 对象 son 成功拷贝了对象 dad 的内容
  

注意的细节

• 这种拷贝称作浅拷贝, 因为这种拷贝并没有解决引用值传值的问题
  若对象 dad 中存在着属性是引用值的数据类型,
  因而会将该引用值的地址传递给 son 对象中对应的属性值,
  造成一旦 son 对象中该属性发生了改变, dad 对象中的该属性也会跟着一起改变

• 示例1: son 对象进行改变
  这里直接使用上面的 dad 和 son 两个对象
  可见, son 对象改变并没有对 dad 对象造成影响
  

• 示例2: son 对象对引用值属性进行修改
  这里新建了两个对象 newdad 和 newson, newdad 对象中有一个数组对象
  显而易见的是, 继承了 car 数组的 newson 对其增加了一个数组成员的同时,
  newdad 对象中的 car 数组也一起发生了改变
  

 
 

2. 深拷贝

作用

• 为了防止引用值传值问题而对浅拷贝进行优化, 解决引用值传值问题

步骤

• 首先对对象进行遍历
• 判断对象中的属性是否为原始值
• 若属性值不是原始值的话, 判断是什么类型的引用值
• 建立相应类型的属性
• 递归以上步骤, 直到全部复制完

示例1

function deep_clone(origin, target){
	var target = target || {};//防止传空
	for(var key in origin){
		if(typeof origin[key] === 'object'){
			target[key] = (origin[key].constructor === Array?[]:{};
			deep_clone(origin[key], target[key]);
		}else{
			target[key] = origin[key];
		}
	}
	return target;
}

示例2

function deep_clone(origin, target){
	var target = target || {},
		toStr = Object.prototype.toString;
		arrStr = '[object Array]';
	
	for(var prop in origin){
		if(origin.hasOwnProperty(prop)){
			if(toStr.call(origin[prop])==arrStr){
				target[prop]=[];
			}else{
				target[prop]={};
			}
			deep_clone(origin[prop], target[prop]);
		}else{
			target[prop]=origin[prop];
		}
	}
}

• 以上两种方法均可以实现实现深层拷贝, 第二种方法适用性好一些, 可以进行更多的调整