【Javascript】浅拷贝和深拷贝（原理与手写实现）

Javascript的基本数据类型：null, undefined, string, number, boolean, symbol.
引用数据类型：Array, Function,特殊对象（Date和RegExp）。
基本数据类型的变量存放在栈中
引用数据存放在堆中，变量存放在栈中，指向它引用的对象在堆中的地址。

浅拷贝与深拷贝定义

浅拷贝：如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址；即只拷贝一层，深层次的引用类型拷贝的是地址。
深拷贝： 深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

浅拷贝的几种方法

Object.assign

const obj = {
    name: 'Lily',
    hobby:[{name: 'swim'},{name: 'reading'}],
    lessons: ['math', 'english']
}

var newObj = Object.assign({}, obj);
newObj.name = 'Job';
newObj.hobby = [{name: 'music'}];
newObj.lessons[0] = 'chinese';

console.log(obj.name, obj.hobby[0], obj.lessons[0]);
// Lily {name: 'swim'} chinese
console.log(newObj.name, newObj.hobby[0], newObj.lessons[0]);
// Job {name: 'music'} chinese

可以看出对于基本数据和一层的引用类型数据，新对象的修改不会影响原来的。修改深层次的引用则会把原来的也修改了（说明是传址）

数组的slice和concat方法

var newHobby = obj.hobby.slice(0);
newHobby[0].name = "music";
console.log(newHobby[0]);
// {name: 'music'}
console.log(obj.hobby[0]);
// {name: 'music'}

var newHobby1 = obj.hobby.concat();
newHobby1[0].name = "kk";
console.log(newHobby1[0]); // {name: 'kk'}
console.log(obj.hobby[0]); // {name: 'kk'}

扩展运算符

var newHobby1 = [...obj.hobby];
newHobby1[0].name = "kk";
console.log(newHobby1[0]);
console.log(obj.hobby[0]);
// 结果同上

深拷贝的几种方法

_.cloneDeep()， jQuery.extend()，JSON.parse(JSON.stringify(obj1))（会忽略undefined，symbol和函数）

手写浅拷贝

function shallowClone(obj) {
     let newObj = {};
     for (let i in obj) {
         // 只要是obj的属性，直接复制一份给newObj
         if (obj.hasOwnProperty(i)) {
             newObj[i] = obj[i];
         }
     }
     return newObj;
 }

手写深拷贝

function deepClone(target, map = new Map()) {
    if (typeof target != 'object') return target;
    if (target instanceof Date) return new Date(target);
    if (target instanceof RegExp) return new RegExp(target);
    if (map.has(target)) return map.get(target);
    let obj = new target.constructor();
    map.set(target, obj);
    for (key in target) {
        if (target.hasOwnProperty(key)) {
            if (typeof key == 'object') obj[key] = deepClone(target[key]);
            else obj[key] = target[key];
        }
    }
    return obj;
}

之前在obj初始化这一步时以为可以简单判断target是数组还是对象从而初始化为[]或者{}，但是后来发现不对，因为target身上还有从原型链上继承的属性和方法，这部分也要添加在obj身上，所以obj的初始化应该是调用target的构造函数。