2 
let ar = []; 
let p = new Proxy(new Map(), { 

get: (o, k) => {
 ar.push(1)
  return Reflect.get(o, k).bind(o) 
},

set: (o, k, v) => {
 ar.push(2)
  return Reflect.set(o, k, v)
}
});
p.set(1, 2)
p.get(1)
console.log(ar) //Outputs [1,1]

我正在尝试拦截对 Map 对象的 set 和 get 操作。我绝不会尝试扩展/子类化地图。在代理所述 Map 对象的过程中，我遇到了这种奇怪的意外行为，在上面的代码中没有触发 set 陷阱，而是触发了两次 get 陷阱！

我进一步通过以下方式从 get 陷阱中记录 k(key) 值；

//same code above
get: (o, k) => {
 console.log(k) //Logs set and then get!
  return Reflect.get(o, k).bind(o) 
}
//same code below

我期望的行为是数组在 get 陷阱[2,1]处console.log(k)实际输出键的值。

我想知道为什么会发生这种情况，我在这里遇到了一些与代理地图相关的问题，但没有一个能导致任何关于为什么会发生这种情况的合理推理。

我的最终目标是在设置的陷阱处触发一个事件。我是否将代理用于它应该使用的东西？如果不是，我应该采取什么方法？我是否应该放弃使用 Map 到 Object Literal，即使它会带来使用 Map 的所有缺点？例如：没有长度属性、仅字符串属性、没有强制唯一键等。

更新：我对这个代理地图的深入研究越多，我遇到的问题就越多。现在在我看来，ES6 代理 API 对待 Maps 的方式就像对待普通对象一样。维尔的回答和我的挖掘支持了这一点。我为什么这么说？阅读以下;

//same code above
 get: (o, k) => {
     if(k === 'tray') return ']'
      return Reflect.get(o, k).bind(o) 
    }
    //same code below
p.tray //returns ]

上面的代码理论上应该不会成功吧？就好像 Proxy 在拦截 Maps 的时候也是用同样的逻辑来拦截对象操作一样！作为;

///--While the following---//
let m = new Map();
m.set('tray', ']')
m.tray //undefined

Vill 的回答说代理标识Map.prototype.set为第一个读取集，然后将其作为函数调用。这是否意味着在我在原始代码中编写的设置陷阱中（在最顶部）不会拦截 Map 的修改/设置属性，实际上Map.prototype.set使用 Map- 的隐式/原生而不是Reflect.set我们通过代理授予的？

这一切难道不是进一步强化了代理和地图不能很好地混合在一起的事实吗？我是不是走错路了？如果是这样，我有什么误解？代理是否应该像对待任何其他对象一样对待地图？

4

1 回答 1

3

这不是错误，而是功能（笑话）。

您应该了解代理的 .get 和 .set 究竟是做什么的。Get 将拦截对象的任何读取尝试。让我们举个例子：

p.set(1,2)
p.get(1)

在第一行，我们：从设置了名称的对象属性中读取，然后尝试将其作为函数调用

在第二行，我们从名为get的对象属性中读取，然后尝试将其作为函数调用。

如果您将尝试此代码：

p.val = 5;

然后您将尝试将 5 设置为名称为 val 的目标，并且 setter 将触发。

这就是代理的 setter 和 getter 的工作方式。

因此，要实现所需的行为，请检查属性名称并返回带有一些附加实现的函数。并且不要忘记调用原始函数。

像这样：

get: (o, k) => {
 if (k==='get') return Reflect.get(o, k).bind(o);
if (k==='set') return function(v){Reflect.set(o, k, v)}
}

希望这可以帮助。

更新：

let obj = {
  take: (v) => v
};
let handler = {
  get: (target, key) => {
    if (key === 'take') {
      return function(v) {
        console.log(`logger says: function ${key} was called with argument: ${v}`);
      }

      return target[key];
    }
  }
};

let proxy = new Proxy(obj, handler);

proxy.take(5);
proxy.take(3);

于 2017-11-18T09:36:08.567 回答