js 淺拷貝(淺複製、淺克隆)、深拷貝(深複製、深克隆)

淺淺一諾發表於2018-12-24
  1. 淺拷貝:拷貝物件A時,物件B將拷貝A的所有欄位,如果欄位是記憶體地址,B將拷貝地址,如果物件時基元型別,B將複製其值。它的缺點是如果你改變了物件B所指向的記憶體地址,你同時也改變了物件A指向這個地址的欄位。
  2. 深拷貝:這種方式會完全拷貝所有資料,優點是B與A不會相互依賴(A,B完全脫離關聯), 缺點是拷貝的速度更慢,代價更大。
  • 淺拷貝實現:

Object.prototype.num = 1;
let person1 = {
	name:'Jack',
	age:'35',
	height:'75kg',
	son1:{
	        name:'Join',
		age:'15'
	},
	son2:{
		name:'Lisa',
		age:10
	},
	cars:['landrover','benz'],
	skill:function(){
		console.log('work');
	}
};
		
let person2 = clone(person1);
//淺複製
function clone(origin,target){
	let tar = target || {};
			
	for(let key in origin){
		if(origin.hasOwnProperty(key)){//該屬性或者方法是該物件自身定義的而不是器原型鏈中定義的 則返回true;否則返回false
			tar[key] = origin[key];
		};
	};
			
	return tar;
};
複製程式碼

  • 深複製

  1. JSON實現:JSON.stringify()+JSON.parse();
  2. jQuery中的$.extend():$extend(true,{},b);
  3. 原生方法實現:

function deepClone(origin,target){
	let tar = target || {};
	let toStr = Object.prototype.toString;
	let arrType = '[object Array]';
			
        for(let key in origin){
		if(origin.hasOwnProperty(key)){
			if((typeof origin[key])==='object'&&origin[key]!==null){
				if(toStr.call(origin[key])===arrType){
					tar[key] = [];
				}else{
					tar[key] = {};
				};
				deepClone(origin[key],tar[key]);
			}else{
				tar[key] = origin[key];		
			};
		};
	};
			
	return tar;
};
複製程式碼


相關文章