Genluo / Precipitation-and-Summary

梳理体系化的知识点&沉淀日常开发和学习
MIT License
16 stars 1 forks source link

通过 proxy 代理 Map 结构 #115

Open Genluo opened 1 year ago

Genluo commented 1 year ago
// 存储代理对象和原始对象的映射
const proxyToRaw = new WeakMap();

// 自定义的拦截器,在这里对调用的Map方法进行拦截
const interceptors = {
  get(key) {
    // 通过代理对象获取原始对象 (proxy => map)
    const rawTarget = proxyToRaw.get(this);
    return rawTarget.get(key);
  },
  set(key, value) {
    const rawTarget = proxyToRaw.get(this);
    return rawTarget.set(key, value);
  },
};

// 创建Proxy对象,同时将代理对象和原始对象建立一个映射
const createProxy = (obj) => {
  const proxy = new Proxy(obj, {
    get(target, key, receiver) {
      // 如果调用的key存在于我们自定义的拦截器里,就用我们的拦截器
      target = interceptors.hasOwnProperty(key) ? interceptors : target;
      return Reflect.get(target, key, receiver);
    },
  });
  // 让proxy后的对象指向原始对象
  proxyToRaw.set(proxy, obj);
  return proxy;
};

const map = createProxy(new Map());

map.set("key", "value");
map.get("key"); // 输出value

作者:ZHANGYU
链接:https://juejin.cn/post/6884473952060571661
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。