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 对象的过程中，我遇到了这种奇怪的意外行为，在上面的代码中没有触发 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 标识为首先读取set，然后将其作为函数调用。 这是否意味着我在原始代码中编写的设置陷阱（在最顶部）不会拦截 Map 的修改/设置属性，实际上 Map-Map.prototype.set 的隐式/原生是使用而不是我们通过代理授予的Reflect.set？

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

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);