js的深拷贝和浅拷贝

定义

在javascript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝是另外申请了一块内存，内容和原数据一样，两个数据指向了不同的地址，两个数据不会相互影响。

区别

在探究浅拷贝和深拷贝之前，先来了解下堆和栈的概念。
堆和栈都是内存中划分出来用于存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；堆（heap）则是动态分配的内存，大小不定也不会自动释放。

接着看下基本数据类型 & 引用数据类型（又称复杂数据类型）
1、基本类型：String、Number、Boolean、null、undefined、Symbol（ES6新增，表示独一无二的值）；基本类型值在内存中占固定大小，保存在栈内存中。
2、引用类型：Object、Array、Date、Function等；引用类型的值是对象，保存在堆内存中。
注：深浅拷贝的区别只适用于Array与Object这样的复杂对象。

实现深拷贝和浅拷贝

var obj = {
    age: 10,
    sex: "男",
    car: ["奔驰", "宝马", "特斯拉", "奥拓"],
    dog: {
        name: "大黄",
        age: 5,
        color: "黑白色"
    }
};

//第一种浅拷贝：直接赋值
var obj_shallow_1 = obj;

//第二种浅拷贝：只做了第一层深拷贝
var obj_shallow_2 = {};
function shallowCopy(obj,targetObj){
    for (let key in obj){
        targetObj[key] = obj[key];
    }
}
shallowCopy(obj, obj_shallow_2);


//深拷贝：把对象a中的所有的数据深拷贝到对象b中
function deepCopy(obj,targetObj){
    for (let key in obj){
        let item = obj[key];
        if (item instanceof Array){//if array
            targetObj[key] = [];
            deepCopy(item,targetObj[key]);
        }else if (item instanceof Object){//if object
            targetObj[key] = {};
            deepCopy(item,targetObj[key]);
        }else {//normal attribute
            targetObj[key] = obj[key];
        }
    }
}
var obj_deep = {};
deepCopy(obj,obj_deep);


console.log("obj:", obj);
// 修改对象中的基本数据类型
obj.age=12;
obj.sex="女";


// 修改对象中的引用数据类型
obj.car.push("奥迪");
obj.dog.name="可爱的大黄";


console.log("change:obj.age=12;obj.sex=女;obj.car.push(奥迪);")
console.log("obj:", obj);
console.log("obj_shallow_1:",obj_shallow_1);
console.log("obj_shallow_2:",obj_shallow_2);
console.log("obj_deep:",obj_deep);

输出：

obj: {      
  age: 10,  
  sex: '男',
  car: [ '奔驰', '宝马', '特斯拉', '奥拓' ],
  dog: { name: '大黄', age: 5, color: '黑白色' }
}
change:obj.age=12;obj.sex=女;obj.car.push(奥迪);
obj: {
  age: 12,
  sex: '女',
  car: [ '奔驰', '宝马', '特斯拉', '奥拓', '奥迪' ],
  dog: { name: '可爱的大黄', age: 5, color: '黑白色' }
}
obj_shallow_1: {
  age: 12,
  sex: '女',
  car: [ '奔驰', '宝马', '特斯拉', '奥拓', '奥迪' ],
  dog: { name: '可爱的大黄', age: 5, color: '黑白色' }
}
obj_shallow_2: {
  age: 10,
  sex: '男',
  car: [ '奔驰', '宝马', '特斯拉', '奥拓', '奥迪' ],
  dog: { name: '可爱的大黄', age: 5, color: '黑白色' }
}
obj_deep: {
  age: 10,
  sex: '男',
  car: [ '奔驰', '宝马', '特斯拉', '奥拓' ],
  dog: { name: '大黄', age: 5, color: '黑白色' }

可以发现，对于引用数据类型，如果包含引用数据类型，那么只对第一层深拷贝是不够的。