js中的赋值、浅拷贝、深拷贝的区别

JSON.parse(JSON.stringify(obj))实现深拷贝的弊端

浅拷贝：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

    var obj = {
      name: 'puxiaoruo',
      language: ['javascript', 'c', 'c#', 'php']
    }
    var obj1 = obj
    obj1.name = 'xiewenting'
    obj1.language[0] = 'java'
    console.log(obj)
    console.log(obj1)

输出为：

浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型共享一块内存，会相互影响。

    var obj = {
      name: 'puxiaoruo',
      language: ['javascript', 'c', 'c#', 'php']
    }
    // var obj1 = obj
    // obj1.name = 'xiewenting'
    // obj1.language[0] = 'java'
    // console.log(obj)
    // console.log(obj1)

    function shallowCopy (object) {
      var target = {}
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          target[key] = object[key]
        }
      }
      return target
    }

    var shallowCopyObj = shallowCopy(obj)
    shallowCopyObj.name = '111'
    shallowCopyObj.language[0] = 'hello world'
    console.log(obj)
    console.log(shallowCopyObj)

输出为：

深拷贝：从堆内存中开辟出来一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

    var obj = {
      name: 'puxiaoruo',
      language: ['javascript', 'c', 'c#', 'php']
    }
    function deepClone (object) {
      var cloneObj = new object.constructor()
      if (object === null) return object
      if (object instanceof Date) return new Date(object)
      if (object instanceof RegExp) return new RegExp(object)
      if (typeof object !== 'object') return object
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          cloneObj[key] = deepClone(object[key])
        }
      }
      return cloneObj
    }
    var deepCloneObj = deepClone(obj)
    deepCloneObj.name = '333'
    deepCloneObj.language[0] = 'hello vue'
    console.log(obj)
    console.log(deepCloneObj)

输出为：

三者总结