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 对象上的 set 和 get 操作。我绝不试图扩展/子类化 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 相关的问题，但没有一个问题能够对为什么会发生这种情况产生任何合理的推理。

我的最终目标是在设置的陷阱处触发一个事件。我是否使用代理来做它应该使用的事情？如果不是，我应该采取什么方法？我是否应该放弃使用映射到对象文字，即使它会带来使用映射的所有缺点？例如:没有长度属性、仅限字符串属性、没有强制唯一键等。

更新:我越深入研究这个代理 map ，遇到的问题就越多。现在在我看来，ES6 Proxy 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 在拦截 Map 时也使用相同的逻辑来拦截对象操作!作为；

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

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

这一切不是进一步强化了代理和 map 不能很好地混合在一起的事实吗？我是不是走错路了？如果是的话我误解了什么？代理是否应该像对待任何其他对象一样对待 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);