浅谈JavaScript浅拷贝与深拷贝

数据类型

在开始拷贝之前，我们从JavaScript的数据类型和内存存放地址讲起。
数据类型分为基本数据类型 和引用数据类型

基本数据类型主要包括undefined，boolean，number， string，null。

基本数据类型主要存放在栈(stack)，存放在栈中的数据简单，大小确定。存放在栈内存中的数据是直接按值存放的，是可以直接访问的。

基本数据类型的比较是值的比较，只要它们的值相等就认为它们是相等的。

let a = 1；
let b = 1;
console.log(a === b); //true

这里使用严格相等，主要是为了==会进行类型转换。

let a = true;
let b = 1;
console.log(a == b); //true

引用数据类型也就是对象类型Object type，比如object，array， function，date等。
引用数据类型是存放在**堆(heap)**内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。

引用数据类型的比较是引用的比较
所以我们每次对js中的引用类型进行操作的时候，都是操作其保存在栈内存中的指针，所以比较两个引用数据类型，是看它们的指针是否指向同一个对象。

let foo = {a: 1, b: 2};
let bar = {a: 1, b: 2};
console.log(foo === bar); //false

虽然变量foo和变量bar所表示的内容是一样的，但是其在内存中的位置不一样，也就是变量foo和bar在栈内存中存放的指针指向的不是堆内存中的同一个对象，所以它们是不相等的。

栈和堆的区别

其实浅拷贝和深拷贝的主要区别就是数据在内存中的存储类型不同。
栈和堆都是内存中划分出来用来存储的区域。
栈(stack) 是自动分配的内存空间，由系统自动释放；
堆(heap) 则是动态分配的内存，大小不定也不会自动释放。

浅拷贝

如果你的对象只有值类型的属性，可以用ES6的新语法Object.assign(…)实现拷贝

//浅拷贝
let obj = {foo: 'foo', bar: "bar"};

let shallowCopy = { ...obj };  //{foo: 'foo', bar: "bar"}

//浅拷贝
let obj = {foo: "foo", bar: "bar"};

let shallowCopy = Object.assign({}, obj); //{foo: 'foo', bar: "bar"}

我们接着来看下浅拷贝和赋值(=) 的区别

let obj = {foo: "foo", bar: "bar"};
let shallowCopy = { ...obj }; //{foo: 'foo', bar: "bar"}
let obj2= obj; //{foo: 'foo', bar: "bar"}
shallowCopy.foo = 1;
obj2.bar = 1
console.log(obj); //{foo: "foo", bar: 1};

可以看出赋值得到的obj2和最初的obj指向的是同一对象，改变数据会使原数据一同改变。
而浅拷贝得到的shallowCopy则将obj的第一层数据对象拷贝到了，和源数据不指向同一对象，改变不会使原数据一同改变。

深拷贝

但是Object.assign(…)方法只能进行对象的一层拷贝。对于对象的属性是对象的对象，他不能进行深层拷贝。
迷糊了吧？直接代码解释

let foo = {a: 0, b: {c: 0}};
let copy = { ...foo };
copy.a = 1;
copy.b.c = 1;
console.log(copy); //{a: 1, b: {c: 1}};
console.log(foo); //{a: 0, b: {c: 1}};

可以看到，使用Object.assign(…)方法拷贝的copy对象的二层对象发生改变的时候，依然会使原数据一同改变。
这里，对存在子对象的对象进行拷贝的时候，就是深拷贝了。

浅拷贝：将B对象拷贝到A对象中，不包括B里面的子对象
深拷贝：将B对象拷贝到A对象中，包括B里面的子对象

深拷贝实现的方法：

这里只说几种常用方法，
1.JSON.parse(JSON.stringify( ));

	let foo = {a: 0, b: {c: 0}};
   	let copy = JSON.parse(JSON.stringify(foo));
   	copy.a = 1;
   	copy.b.c = 1;

   	console.log(copy); //{a: 1, b: {c: 1}};
   	console.log(foo); //{a: 0, b: {c: 0}};

2.递归拷贝

	function deepCopy(initialObj, finalObj){
    		let obj = finalObj || {};
    		for(let i in initialObj) {
    			if(typeof initialObj[i] === "object") {
    				obj[i] = (initialObj[i].constructor === Array) ? [] : {};
    				arguments.callee(initialObj[i], obj[i]);
    			}else{
    				obj[i] = initialObj[i];
    			}
    		}
    		return obj;
    	}


    	var foo = {a: 0, b: {c: 0}};
    	var str = {};

    	deepCopy(foo, str);

    	str.a = 1;
    	str.b.c = 1;

    	console.log(str); //{a: 1, b: {c: 1}};
    	console.log(foo); //{a: 0, b: {c: 0}};

上述代码确实可以实现深拷贝，但是当遇到两个互相引用的对象，会出现死循环的情况。

为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。

改进版代码如下：

		function deepCopy(initialObj, finalObj) {
			let obj = finalObj || {};
			for(let i in initialObj){
				let prop = initialObj[i];//避免相互引用导致死循环，如initialObj.a = initialObj的情况
				if(prop === obj) {
					continue;
				}
				if(typeof prop === 'object'){
					obj[i] = (prop.constructor === Array) ? [] : {};
					arguments.callee(prop, obj[i]);
				}else{
					obj[i] = prop;
				}
			}
			return obj;
		}


    	var foo = {a: 0, b: {c: 0}};
    	var str = {};

    	deepCopy(foo, str);

    	str.a = 1;
    	str.b.c = 1;

    	console.log(str); //{a: 1, b: {c: 1}};
    	console.log(foo); //{a: 0, b: {c: 0}};

3.使用Object.create( )方法

		function deepCopy(initialObj, finalObj){
    		let obj = finalObj || {};
    		for(let i in initialObj){
    			let prop = initialObj[i];  //避免相互引用对象导致死循环，如initialObj[i].a = initialObj的情况
    			if(prop === obj){
    				continue;
    			}
    			if(typeof prop === "object"){
    				obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    			}else{
    				obj[i] = prop;
    			}
    		}
    		return obj;
    	}


    	let foo = {a: 0, b: {c: 0}};
    	let str = {};

    	deepCopy(foo, str);

    	str.a = 1;
    	str.b.c = 1;

    	console.log(str); //{a: 1, b: {c: 1}};
    	console.log(foo); //{a: 0, b: {c: 0}};

4.jQuery

jQuery提供了一个$.extend可以实现深拷贝

var $ = require('jquery);

let foo = {a: 0, b: {c: 0}};
let str = $.extend(true, {}, foo);
str.a = 1;
str.b.c = 1;

console.log(str); //{a: 1, b: {c: 1}};
console.log(foo); //{a: 0, b: {c: 0}};

5.lodash
另一个很热门的函数库lodash，也有提供_.cloneDeep用来深拷贝

var _ = require('lodash);

let foo = {a: 0, b: {c: 0}};
let str = _.cloneDeep(foo);
str.a = 1;
str.b.c = 1;

console.log(str); //{a: 1, b: {c: 1}};
console.log(foo); //{a: 0, b: {c: 0}};

局限性
所有深拷贝的方法并不适用于所有类型的对象。当然还有其他的坑，像是如何拷贝原型链上的属性？如何拷贝不可枚举属性等等。
虽然lodash是最安全的通用深拷贝方法，但如果你自己动手，可能会依据需求写出最适合你的更高效的深拷贝的方法：

//适用于日期的简单深拷贝的例子
		function deepCopy(obj) {
    		let copy;

    		//处理三种简单的引用数据类型加上undefined和null
    		if(obj == null || typeof obj != "object") return obj;

    		//处理Date
    		if(obj instanceof Date){
    			copy = new Date();
    			copy.setTime(obj.getTime());
    			return copy;
    		}

    		//处理Array
    		if(obj instanceof Array) {
    			copy = [];
    			for(let i = 0; i < obj.length; i++) {
    				copy[i] = deepCopy(obj[i]);
    			}
    			return copy;
    		}

    		//处理Function
    		if(obj instanceof Function) {
    			copy = function() {
    				return obj.apply(this, arguments);
    			}
    			return copy;
    		}

    		//处理Object
    		if(obj instanceof Object) {
    			copy = {};
    			for(let attr in obj) {
    				if(obj.hasOwnProperty(attr)) copy[attr] = deepCopy(obj[attr]);
    			}
    			return copy;
    		}


    		throw new Error("无法深拷贝" +obj.constructor+ "类型的数据")
    	}

快乐拷贝?