15、深浅拷贝

[CodingMeUp]

深拷贝：拷贝实例； 浅拷贝：拷贝引用（原对象）。

说深拷贝和浅拷贝之前，我先去了解了下高程书上的JavaScript的变量类型：

• 基本类型：undefined、null、Boolean、number、string。变量直接按指存放在栈区内，可以直接访问，所以我们平时把字符串、数字的值赋值给新变量，相当于把值完全复制过去，新变量的改变不会影响旧变量。

• 引用类型：存放在堆区的对象，变量在栈区中保存的是一个指针地址。 例子

  let a = 123; let b = a; b = 456; console.log(a);//123 console.log(b);//456

浅拷贝实现

• 函数实现

 function shallowClone (source){
        if(!source || typeof source != 'object'){
            throw new Error ('error');
        }
        var targetObj = source.constructor === Array ? [] : {};
        for(var keys in source) {
            if(source.hasOwnProperty(keys)){
                targetObj[keys] = source[keys];
            }
        }
        return targetObj；
    }

• 库及方法实现 Object.assign jquey中的$.extend({}, obj); Array.prototype.slice()和Array.prototype.concat()都会返回一个数组或者对象的浅拷贝。（看起来像深拷贝）

 let obj = { name: '程序狗', age:{child: 12} }
    let copy = Object.assign({}, obj);
    copy.name = '单身狗';
    copy.age.child = 24;
    console.log(obj);// { name: '程序狗', age:{child: 24} }

上面的代码可以直接说明它只对顶层属性做了赋值，完全没有继续做递归之类的把所有下一层的属性做深拷贝。

Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。用的时候，还是要注意这个问题的。 http://www.siyuweb.com/javascript/2930.html

深拷贝

• JSON对象中的parse和stringify，JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串，parse可以把JSON字符串反序列化为一个js对象，通过这两个方法，也可以实现对象的深复制。

1.他无法实现对函数 、RegExp等特殊对象的克隆 2.会抛弃对象的constructor,所有的构造函数会指向Object 3.对象有循环引用,会报错

在 MDN 上找到了原因：

If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array). JSON.stringify can also just return undefined when passing in "pure" values like JSON.stringify(function(){}) or JSON.stringify(undefined).

undefined、function、symbol 会在转换过程中被忽略。。

主要的坑就是以上几点,我们一一测试下.

// 构造函数
function person(pname) {
  this.name = pname;
}

const Messi = new person('Messi');

// 函数
function say() {
  console.log('hi');
};

const oldObj = {
  a: say,
  b: new Array(1),
  c: new RegExp('ab+c', 'i'),
  d: Messi
};

const newObj = JSON.parse(JSON.stringify(oldObj));

// 无法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 无法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]

我们可以看到在对函数、正则对象、稀疏数组等对象克隆时会发生意外，构造函数指向也会发生错误。

const oldObj = {};
oldObj.a = oldObj;
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON

对象的循环引用会抛出错误.

• 函数实现

    function cloneDeep(obj){
        if(typeof obj !== 'object' || Object.keys(obj).length === 0 ){
            return obj;
        }
        let resultData = {};
        return recurison(obj, resultData);
    }

    function recurison(obj, data = {}){
        for(key in obj){
            if(typeof obj[key] == 'object' && Object.keys(obj[key].length > 0 )){
                data[key] = recurison(obj[key]);
            }else{
                data[key] = obj[key];
            }
        }
        return data;
    }

    var o1 = {
        arr: [1, 2, 3],
        obj: {
            key: 'value'
        },
        func: function(){
            return 1;
        }
    };

    var o3 = cloneDeep(o1);
    console.log(o3 === o1);//false
    console.log(o3.obj === 01.obj);//false
    console.log(o3.func === o1.func);//true

/**
* deep clone
* @param  {[type]} parent object 需要进行克隆的对象
* @return {[type]}        深克隆后的对象
*/
const clone = parent => {
  // 维护两个储存循环引用的数组
  const parents = [];
  const children = [];

  const _clone = parent => {
    if (parent === null) return null;
    if (typeof parent !== 'object') return parent;

    let child, proto;

    if (isType(parent, 'Array')) {
      // 对数组做特殊处理
      child = [];
    } else if (isType(parent, 'RegExp')) {
      // 对正则对象做特殊处理
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, 'Date')) {
      // 对Date对象做特殊处理
      child = new Date(parent.getTime());
    } else {
      // 处理对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用Object.create切断原型链
      child = Object.create(proto);
    }

    // 处理循环引用
    const index = parents.indexOf(parent);

    if (index != -1) {
      // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
      return children[index];
    }
    parents.push(parent);
    children.push(child);

    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }

    return child;
  };
  return _clone(parent);
};

递归的方法

递归的思想就很简单了，就是对每一层的数据都实现一次 创建对象->对象赋值 的操作，简单粗暴上代码：

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      }else{ // 如果不是，就直接赋值
        targetObj[keys] = source[keys];
      }
    } 
  }
  return targetObj;
}

// 带weakMap循环依赖解法
1.Map可以使用任意类型的key值，不限字符串，对象等。

2.WeakMap只能使用对象作为key值，是弱引用，当从WeakMap中移除时，会自动垃圾回收

3.Object只能用基本类型作为key值。

下面使用WeakMap解决深拷贝中对象循环引用问题

复制代码
  function deepClone (origin, weakMap = new WeakMap()) {
    if (origin == undefined || typeof origin != 'object') {
      return origin
    }
    if (origin instanceof Date) {
      return new Date(origin)
    }
    if (origin instanceof RegExp) {
      return new RegExp(origin)
    }
    const val = weakMap.get(origin)
    if (val) return val
    const target = new origin.constructor()
    weakMap.set(origin, target)
    for (let k in origin) {
      target[k] = deepClone(origin[k], weakMap)
    }
    return target
  }

总结

1. 赋值运算符 = 实现的是浅拷贝，只拷贝对象的引用值；
2. JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”；
3. JSON.stringify 实现的是深拷贝，但是对目标对象有要求；
4. 若想真正意义上的深拷贝，请递归

[CodingMeUp]

模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况