javascript - ES6 代理中的意外设置陷阱行为

Question

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 对象的设置和获取操作。我绝不会尝试扩展/子类化 map 。在代理上述 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 相关的问题，但没有一个能对为什么会发生这种情况进行任何合理的推理。

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

更新:我越来越深入地研究这个代理 map ，我不断遇到的问题也越来越多。现在在我看来，ES6 Proxy API 对待 Maps 的方式就像对待普通对象一样。 Vill 的回答和我的挖掘支持了这一点。我为什么这么说？阅读以下内容；

//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 的回答说 Proxy 将 Map.prototype.set 识别为第一次读取 set 并将其作为函数调用。这是否意味着我在原始代码中编写的设置陷阱(在最顶部)不会拦截 Map 的修改/设置属性，实际上是 Map-Map 的隐式/ native .prototype.set 用于代替我们通过 Proxy 授予的 Reflect.set？

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

Answer 1

这不是错误，而是功能(笑话)。

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

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

在第一行，我们:读取名称为set的对象属性，然后尝试将其作为函数调用

在第二行，我们从名称为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);