JS对象深度克隆/复制

实现思路

对象类型存储的是对象的引用地址,而把对象的实际内容单独存放,因为对象类型通常比较庞大,这是数据开销和内存开销优化的手段。因此我们不能像原始数据类型一样简单的赋值,而应该遍历数据中的每一个元素,将其中的每一个原始数据类型复制过去,做法如下

  1. 使用for-in遍历对象中所有属性
  2. 判断属性是否是原型链上的,不是原型链上的才拷贝
  3. 判断属性值是原始类型还是引用类型
  4. 原始类型直接赋值
  5. 引用类型值不为null时,判断是数组还是对象, 创建对应的空对象或空数组,递归调用函数,将值赋值进去

源代码


/**
 * 深度克隆
 * @param   origin 被拷贝的原对象
 * @param   target 拷贝出来的对象
 * @return         拷贝出来的对象
 */
function deepClone(origin, target) {

	var target = target || {};
	toStr = Object.prototype.toString;
	for(var prop in origin ){
		if(origin.hasOwnProperty(prop)){	//不能把原型链上的一起拷贝了
			//判断是元素类型还是引用类型
			if(typeof(origin[prop]) == 'object' && typeof(origin[prop]) !== "null" ){
				target[prop] = toStr.call(prop) == '[object Array]' ? [] : {};
				arguments.callee(origin[prop], target[prop]);	//递归调用
			} else {
				target[prop] = origin[prop];	//原始类型直接复制
			}
		}
	}

	return target;
}

测试数据

var obj = {
	name: 'huyao',
	card: ['black', 'gold', 'sample'],
	child: {
		name: 'xioahu',
		age: 10,
		frends: [{
					name: 'xiaowang',
					age: 10
				},{
					name: 'xiaoliu',
					age: 9
				},{
					name: 'longshao',
					age: 11
				}
		]
	}
}
var obj1 = {};
deepClone(obj, obj1);
console.log(obj1)
console.log(deepClone(obj, obj1))

猜你喜欢

转载自blog.csdn.net/qq_37746973/article/details/80480527