js 拷贝

概念

对于基础值来说，拷贝就是值的拷贝，但对于引用值来说，可分为

• 赋值：拷贝引用值的地址
• 浅拷贝：拷贝一层值
• 深拷贝：拷贝所有层。

基本原理

赋值

var obj = {
	a: 1,
	b: [1,2]
}

var copy = obj;
obj.a = 2;
obj.b[0] = 2;
console.log(copy); // {a: 2, b: [2,2]}

直接拷贝的是引用值的地址，对象内发生任何变化，两个引用均发生相应的变化。

浅拷贝

function simpleClone(origin) {
	target = {};
	for (var prop in origin) {
        if (origin.hasOwnProperty(prop)) {
		    target[prop] = origin[prop];
        }
	}
	return target;
}
var obj = {
	a: 1,
	b: [1,2]
}
var copy1 = simpleClone(obj);
obj.a = 2;
obj.b[0] = 2;
console.log(copy1); //{a: 1,b: [2,2]}

浅拷贝是拷贝了一层基础值的值，但并未拷贝引用值的根本值，在例子中可以看到，改变obj中的引用值，拷贝的对象中仍然改变。

深拷贝

function deepClone(origin, target) {
	target = target || {};
	for (var prop in origin) {
		if (origin.hasOwnProperty(prop)){
			//引用值
			if(typeof(origin[prop]) == 'object' && origin[prop] !== null) {
				//数组处理
				if(Object.prototype.toString.call(origin[prop]) == '[object Array]') {
					target[prop] = [];
				} else {
					//对象处理
					target[prop] = {};
				}
				deepClone(origin[prop], target[prop]);	
			} else {
				//基础值赋值
				target[prop] = origin[prop];
			}		
		}
	}
	return target;
}
var obj = {
	a: 1,
	b: [1,2]
}
var copy1 = deepClone(obj);
obj.a = 2;
obj.b[0] = 2;
console.log(copy1); //{a: 1,b: [1,2]}

注意：本例子中只考虑了对象内属性为数组和对象的情况。