浅谈js对象浅拷贝

实现js对象浅拷贝

实现浅拷贝的第一种方法

//实现浅拷贝第一种方法
	function shallowCopy(obj) {
		var newobj = {};
		for(var key in obj){
			newobj[key] = obj[key];
		}
		return newobj;
	}
	
	var obj = {
		a:"hello",
		b:{
			a:"world",
			b:21
		},
		c:[1,2,3],
		d:function(){
			alert("d");
		},
		e:null,
		f:undefined
	}
	
	var newobj = shallowCopy(obj);
	console.log(newobj.a); //hello
	console.log(newobj.b); //{a: "world", b: 21}
	console.log(newobj.c); //[1, 2, 3]
	console.log(newobj.d); //f(){alert("d");}
	//更改拷贝对象中的a,b,c,d，看看被拷贝的对象是否变化
	newobj.a = "changed";
	newobj.b.a = "changed";
	newobj.b.b = "22";
	newobj.c = [4,5,6];
	newobj.d = function(){alert("change")};
	console.log(obj.a); //hello
	//这里需要注意！newobj和obj的b在浅拷贝时如果数据类型是引用类型，则在堆中是共用同一内存，互相影响
	console.log(obj.b); //{a: "changed", b: "22"} 
	console.log(obj.c); //[1, 2, 3]
	console.log(obj.d); //f(){alert("d");}

可以看出浅拷贝是拷贝了一层，深层次的对象级别的就拷贝其引用类型，意思就是浅拷贝就是拷贝了一层，当被拷贝对象中如果数据类型是基本数据类型，那么就如同直接赋值，它们在栈中有自己的内存空间，所以当改变newobj的基本数据类型的值时，因为在栈中指向的内存地址不同，原始对象obj对应的基本数据类型的值不会被影响。
但是如果原始对象中还存在对象，即引用类型，对于浅拷贝来说就只能拷贝其引用类型，newobj中的引用类型和原始对象obj的在堆中还是共用同一个内存，互相影响。

实现浅拷贝的第二种方法
ES6中的Object.assign方法，Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
Object.assign(target, …sources)
参数：
target：目标对象。
sources：任意多个源对象。
返回值：目标对象会被返回。

//实现浅拷贝第二种方法
	var obj1 = {
		a:"hello",
		b:{
			a:"world",
			b:23
		}
	};
//			target：目标对象。
//			sources：任意多个源对象。
//			返回值：目标对象会被返回。
	var newobj1 = Object.assign({},obj1);
	newobj1.a = "changed";
	newobj1.b.a = "changed1";
	newobj1.b.b = 24;
	console.log(obj1.a); //hello
	//针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。
	//假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
	console.log(obj1.b.a); //changed1
	console.log(obj1.b.b); //24

这里可以看出使用Object.assign()，当原始对象中的属性时一个对象的引用，那么obj1和newobj1的这个引用类型在堆中也是指向同一内存地址，互相影响。

实现浅拷贝的第三种方法
使用JSON.parse(JSON.tostringfiy())
JOSN.parse()方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
JSON.stringfiy()方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串

//实现浅拷贝第三种方法
var obj2 = {
		a:'a',
		b:{
			a:"a1",
			b:123
		},
		c:function(){alert("c");}
	}
	
var newobj2 = JSON.parse(JSON.stringify(obj2));
newobj2.a = "changed";
newobj2.b.a = "changed1";
console.log(obj2.a); //a
console.log(obj2.b.a); //a1
//发现newobj2少了c属性，忽略function和undefined的字段
console.log(newobj2); //{a:"changed",b:{a:"changed1",b:123}}

这种方式还是有局限性的，对象的属性必须是标准格式的JSON数据。
这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象，函数，undefined是无法通过这种方式浅拷贝。所以这个方法只能用在单纯只有数据的对象。