day11_JS_引用、浅拷贝、深拷贝的区别

js的引用传值、浅拷贝和深拷贝是经常遇到的问题，一直模模糊糊有点说不过去， 如果还不清楚的话，不妨看看这篇文章吧。

1.引用传值

JS的数据类型大致分为两种：

1. 基础类型：number、string、boolean、null、undefined、symbol

2. 引用类型：Object(Array、Date、RegExp、Function)

两种类型之间，最大的差别是在内存中保存的位置不同。基本数据类型保存在栈内存中；引用数据类型保存在堆内存中，然后在栈内存中保存了一个对堆内存中实际对象的引用，即数据在堆内存中的地址。

所以应该记住：基础数据类型赋值时是【传值】，而引用数据类型赋值时是【传址】。

为什么基本数据类型保存在栈中，而引用数据类型保存在堆中？

1. 堆比栈大，栈比堆速度快；
2. 基本数据类型比较稳定，而且相对来说占用的内存小；
3. 引用数据类型大小是动态的，而且是无限的，引用值的大小会改变，不能把它放在栈中，否则会降低变量查找的速度，因此放在变量栈空间的值是该对象存储在堆中的地址，地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响；
4. 堆内存是无序存储，可以根据引用直接获取

• 引用赋值

传的是地址，所以新旧值的改变回相互影响。

var obj = {
      a: 1,
      b: 2,
      c: 3,
      d: {
            e: 10
      }
}
// 赋值的是引用，被复制的对象的所有变量、对象仍然指向原对象。
var cloneObj = obj;
console.log(obj === cloneObj);       //true
obj.a = 1000;
console.log(cloneObj.a);    //1000,赋值的是引用

2. 浅拷贝

浅拷贝：拷贝原始对象的第一层属性，当属性是基本类型时，拷贝属性的值，当属性是引用类型，拷贝属性的内存地址，因此新旧对象修改属性相互影响。

• 解构赋值

var obj = {
      a: 1,
      b: 2,
      c: 3,
      d: {
            e: 10
      }
}
let cloneObj1 = {
      ...obj
}
console.log(cloneObj1 === obj);     //false
console.log(cloneObj1.a === obj.a); //true
obj.a = 100;    
obj.d.e = 200;
console.log(cloneObj1.a , cloneObj1.d.e);   //1  200
//克隆之后的cloneObj.a仍是1，浅克隆后第一层对象的变量不会因为原对象而改变

• 数组同理

3. 深拷贝

深拷贝：拷贝原始对象的所有的属性，并拷贝属性指向的动态分配的内存，深拷贝新旧对象不共享内存，修改新对象不会改到原对象。

• JSON.parse(JSON.stringify(object))

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是该方法也是有局限性的：

1. 会忽略null、undefined、symbol
2. ES6类
3. 不能序列化函数
4. 不能解决循环引用的对象
5. 在遇到函数、 undefined 或者 symbol的时候，该对象也不能正常的序列化
6. 原型链、DOM、Date、Reg如何处理
7. ……

实现一个深拷贝是很困难的，需要我们考虑好多种边界情况，比如原型链如何处理、DOM 如何处理等等，所以这里我们实现的深拷贝只是简易版，并且我其实更推荐使用 lodash 的深拷贝函数。

function deepClone(obj) {
  function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function') && o !== null
  }

  if (!isObject(obj)) {
    throw new Error('非对象')
  }

  let isArray = Array.isArray(obj)
  let newObj = isArray ? [...obj] : { ...obj }
  Reflect.ownKeys(newObj).forEach(key => {
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
  })

  return newObj
}

let obj = {
  a: [1, 2, 3],
  b: {
    c: 2,
    d: 3
  }
}
let newObj = deepClone(obj)
newObj.b.c = 1
console.log(obj.b.c) // 2

• 升级版本

class Box {
    static ARG = ["a", "b"];
    constructor(a1, b1) {
    this.a = a1;
    this.b = b1;
    }
    play() {
    console.log(this.a1 + this.b1);
    }
}
var obj = {
    a: 1,
    b: "a",
    c: false,
    d: {
    e: undefined,
    f: null,
    g: [1, 2, 3, 4, 5],
    h: new Date(),
    i: /^[a-z]{2,4}$/gi,
    j: new Box(4, 5),
    k: {},
    },
};
Object.defineProperties(obj.d.k, {
    l: { value: 10 },
    m: {
    configurable: true,
    writable: true,
    value: 20,
    },
    n: {
    enumerable: true,
    value: function () {
        console.log("aaaa");
    },
    },
});

function cloneObject(target, source) {
    var names = Object.getOwnPropertyNames(source);
    for (let i = 0; i < names.length; i++) {
    var desc = Object.getOwnPropertyDescriptor(source, names[i]);
    if (typeof desc.value === "object" && desc.value !== null) {
        var obj;
        if (desc.value instanceof HTMLElement) {
        obj = document.createElement(desc.value.nodeName);
        } else {
        switch (desc.value.constructor) {
            case Box:
            obj = new desc.value.constructor(
                desc.value[Box.ARG[0]],
                desc.value[Box.ARG[1]]
            );
            break;
            case RegExp:
            obj = new desc.value.constructor(
                desc.value.source,
                desc.value.flags
            );
            break;
            default:
            obj = new desc.value.constructor();
        }
        }
        cloneObject(obj, desc.value);
        Object.defineProperty(target, names[i], {
        value: obj,
        enumerable: desc.enumerable,
        writable: desc.writable,
        configurable: desc.configurable,
        });
    } else {
        Object.defineProperty(target, names[i], desc);
    }
    }
    return target;
}

var obj1 = cloneObject({}, obj);
obj.d.k.m = 100;
console.log(obj1);//20

最后再用一个表格，总结一下它们之间的区别，希望对困惑的你有所帮助。