【proxy深拷贝】递归拷贝性能不够好，proxy深拷贝学习笔记

proxy深拷贝学习笔记

学习文章

写在前面

忙了一整年。学习flag重新立起来。感谢大佬们发文让我们学习，知识专利宝贵，辛苦大佬。

思维导图

JSON.parse(JSON.stringfy)

文中未提到为何我们乞丐版的深拷贝不够优秀。
我自己理解：

1. 无法拷贝function与Object类型
2. function的构造函数会被指向Object（熟悉原型链的小伙伴们都应该明白）

递归函数

1. 每一次递归，无论此函数是否有改变都需要重新递归
2. 性能不够好
3. es10都来了，还不进步吗！！！

proxy深拷贝

几个核心函数

判断target类型

这个函数我ctrl+c ctrl+v了。日常业务中经常用到

// 核心函数：判断属否是object 
const isPlainObject = value => {
  if (
    !value ||
    typeof value !== 'object' ||
    {}.toString.call(value) != '[object Object]'
  ) {
    return false
  }
  var proto = Object.getPrototypeOf(value)  // 获取值的proto
  if (proto === null) {
    return true
  }
  var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor // 
  return (
    typeof Ctor == 'function' &&
    Ctor instanceof Ctor &&
    Function.prototype.toString.call(Ctor) ===
    Function.prototype.toString.call(Object)
  )
}

是否是我们的proxy类型与对暗号

这个思路也可以在其他函数中广泛应用

// 判断是否是proxy函数，关键点：proxy有get函数，并在get函数中返回symbol，唯一值，以判断
const isProxy = value => !!value && !!value[MY_IMMER]

如果不是proxy，我们需要将其拦截

 const getProxy = data => {
    if (isProxy(data)) {
      return data
    }
    if (isPlainObject(data) || Array.isArray(data)) {
      if (proxies.has(data)) {
        return proxies.get(data)
      }
      const proxy = new Proxy(data, objectTraps)
      proxies.set(data, proxy)
      return proxy
    }
    return data
  }

判断我们深拷贝的对象是否有改变

  const isChange = data => {
    if (proxies.has(data) || copies.has(data)) return true
  }

其他都是正常递归拷贝了

学习的思路

new map的速度比正常的Object要快，避免递归爆栈

使用proxy拦截来判断是否对象有改变

拦截set，所有赋值都在 copy （原数据浅拷贝的对象）中进行，这样就不会影响到原对象（摘抄原文）

废话

活到老学到老，感觉技能点又+1