为什么在 ES2015 中代理到 Map 对象不起作用

IT技术 javascript google-chrome dictionary proxy
2021-01-15 10:24:09

我正在通过 Google Chrome 版本 57.0.2987.133 运行以下脚本：

var loggingProxyHandler = {
    "get" : function(targetObj, propName, receiverProxy) {
        let ret = Reflect.get(targetObj, propName, receiverProxy);
        console.log("get("+propName.toString()+"="+ret+")");
        return ret;
     },

     "set" : function(targetObj, propName, propValue, receiverProxy) {
         console.log("set("+propName.toString()+"="+propValue+")");
         return Reflect.set(targetObj, propName, propValue, receiverProxy);
     }
};

function onRunTest()
{
    let m1 = new Map();
    let p1 = new Proxy(m1, loggingProxyHandler);
    p1.set("a", "aval");   // Exception thrown from here
}

onRunTest();
NOTE: Requires a browser supporting ES2015's Proxy

运行时，我看到处理程序的 get 陷阱被调用以返回 Map 的 set 函数，然后收到以下错误：

"Uncaught TypeError: Method Map.prototype.set called on incompatible receiver [object Object]"
at Proxy.set (native)
...

我尝试从 loggingProxyHandler 中删除陷阱函数（使其成为空对象），但仍然收到相同的错误。

我的理解是 Proxy 对象应该能够为所有原生 ES5 和 ES2015 javascript 对象生成。Array 似乎在相同的代理处理程序下运行良好。我误解了规格吗？
我的代码缺少什么吗？Chrome 中是否存在已知错误？（我进行了搜索，发现 Chrome 在这个主题上没有任何缺陷。）

2个回答

您收到错误的原因是代理没有参与p1.set调用（除了set陷阱 - 无关，尽管名称相同 - 被调用以检索函数引用）。因此，一旦检索到函数引用，就会调用它并this设置为代理，而不是Map -Map不喜欢的。

如果您真的想拦截 上的所有属性访问调用Map，您可以通过绑定您正在返回的任何函数引用来修复它get（请参阅***行）：

const loggingProxyHandler = {
    get(target, name/*, receiver*/) {
        let ret = Reflect.get(target, name);
        console.log(`get(${name}=${ret})`);
        if (typeof ret === "function") {    // ***
          ret = ret.bind(target);           // ***
        }                                   // ***
        return ret;
     },

     set(target, name, value/*, receiver*/) {
         console.log(`set(${name}=${value})`);
         return Reflect.set(target, name, value);
     }
};

function onRunTest() {
    const m1 = new Map();
    const p1 = new Proxy(m1, loggingProxyHandler);
    p1.set("a", "aval");
    console.log(p1.get("a")); // "aval"
    console.log(p1.size);     // 1
}

onRunTest();
NOTE: Requires a browser supporting ES2015's Proxy

请注意，在调用Reflect.getand 时Reflect.set，我们不会传递接收者（实际上，我们根本没有在其中使用receiver参数，因此我已将参数注释掉）。这意味着它们将使用目标本身作为接收器，如果属性是访问器（如Map's 的size属性）并且他们需要它们this是实际实例（如Map's size），则您需要这样做。

但是，如果您的目标只是拦截Map#get和Map#set，则根本不需要代理。任何一个：

  1. 创建一个Map子类并实例化它。不过，假设您控制了Map实例的创建。

  2. 创建一个从Map实例继承的新对象，并覆盖get和set；您不必控制原件Map的创作。

  3. 将实例上的set和get方法替换为Map您自己的版本。

这是#1：

class MyMap extends Map {
  set(...args) {
    console.log("set called");
    return super.set(...args);
  }
  get(...args) {
    console.log("get called");
    return super.get(...args);
  }
}

const m1 = new MyMap();
m1.set("a", "aval");
console.log(m1.get("a"));

#2：

const m1 = new Map();
const p1 = Object.create(m1, {
  set: {
    value: function(...args) {
      console.log("set called");
      return m1.set(...args);
    }
  },
  get: {
    value: function(...args) {
      console.log("get called");
      return m1.get(...args);
    }
  }
});

p1.set("a", "aval");
console.log(p1.get("a"));

#3：

const m1 = new Map();
const m1set = m1.set; // Yes, we know these are `Map.prototype.set` and
const m1get = m1.get; // `get`, but in the generic case, we don't necessarily
m1.set = function(...args) {
  console.log("set called");
  return m1set.apply(m1, args);
};
m1.get = function(...args) {
  console.log("get called");
  return m1get.apply(m1, args);
}

m1.set("a", "aval");
console.log(m1.get("a"));

@兰德：是的。没有理由set调用陷阱，没有设置属性。我不明白为什么访问size有问题：属性是继承的，只需访问它。
2021-03-15 10:24:09
@DonHatch 这似乎表明该.size属性是 getter，它的作用类似于this. 如果我没记错的话，另一种方法是从描述符中获取 getter 调用它：Object.getOwnPropertyDescriptor(target, 'size').get.call(target)这应该可以解决问题，实际上与target.size. :)
2021-03-28 10:24:09
@TJCrowder 你说“我不明白为什么访问大小有问题：属性是继承的，只需访问它。” 我也不明白为什么，但确实如此。在 Chrome 59 上，您的第一个示例有效，但如果我添加console.log(p1.size)它，则会给出Uncaught TypeError: Method Map.prototype.size called on incompatible receiver [object Object]. 有任何想法吗？你的例子是我见过的最接近工作的 Map 代理。
2021-03-31 10:24:09
嗯，显然我可以通过在您的第一个示例中if (name === 'size') { return targetObj.size; }调用 to 之前插入来使代理完全正常运行Reflect.get()。不知道为什么，但这很棒！我认为它将解决我正在处理的另一个问题：stackoverflow.com/questions/43801605
2021-04-09 10:24:09
如果我想在这里实现某种级别的 AOP，看起来我需要使用子类机制。但是访问 Map 的 size 属性是有问题的，因为它不是通过方法调用实现的。当我添加推荐的绑定时，它确实绕过了异常，但是一旦函数通过 get 陷阱绑定到 targetObj，将不会调用 set 陷阱，从而有效地使 Proxy 无效。我想如果我想追求代理，我可以尝试生成一个全新的函数，绑定到 targetObject 但调用代理处理程序陷阱（通​​过闭包）。
2021-04-13 10:24:09

让我补充一点。

许多内置对象，例如Map，Set，Date，Promise和其他人利用所谓的内部插槽。

这些类似于属性，但保留用于内部的、仅用于规范的目的。例如，Map将项目存储在内部 slot 中[[MapData]]。内置方法直接访问它们，而不是通过[[Get]]/[[Set]]内部方法。所以Proxy无法拦截。

例如：

let map = new Map();

let proxy = new Proxy(map, {});

proxy.set('name', 'Pravin'); // Error

在内部，aMap将所有数据存储在其[[MapData]]内部插槽中。该代理没有这样的插槽。内置方法Map.prototype.setmethod 尝试访问内部属性this.[[MapData]]，但因为this=proxy，无法在代理中找到它而失败。

有一种方法可以解决它：

let map = new Map();
let proxy = new Proxy(map,{
    get(target,prop,receiver){
        let value = Reflect.get(...arguments);
        return typeof value === 'function'?value.bind(target):value;
    }
});
proxy.set('name','Pravin');
console.log(proxy.get('name')); //Pravin (works!)

现在它工作正常，因为get陷阱将函数属性（例如 map.set）绑定到目标对象（地图）本身。所以这个里面的值proxy.set(...)不会是proxy，而是原始的map。因此，当 的内部实现set尝试访问this.[[MapData]]内部插槽时，它会成功。

“内部插槽”是一个实现细节。它们不是对象属性。JavaScript 程序员不需要了解内部插槽，但对于解释某些 JavaScript 行为非常有用。希望这会有所帮助。
2021-03-14 10:24:09
感谢您的回答。您如何判断变量是否具有这些内部插槽之一？
2021-03-22 10:24:09
内部槽对应于与对象相关联并被各种 ECMAScript 规范算法使用的内部状态。内部槽不是对象属性，它们不是继承的。根据特定的内部插槽规范，这种状态可能由任何 ECMAScript 语言类型的值或特定 ECMAScript 规范类型的值组成。
2021-03-23 10:24:09
@Andrew ECMAScript 引擎中的每个对象都与一组定义其运行时行为的内部方法相关联。这些内部方法不是 ECMAScript 语言的一部分。本规范定义它们纯粹是为了说明目的。但是，ECMAScript 实现中的每个对象都必须按照与其关联的内部方法指定的方式运行。实现这一点的确切方式由实现决定。
2021-04-07 10:24:09
其它你可能感兴趣的问题
上一篇Javascript 关闭不起作用 下一篇为什么即使不作为参数传递，“事件”变量也可用？