使用代理超过最大堆栈调用大小

Question

我正在尝试为某个对象创建代理以检查属性是否被访问或修改，然后 console.log 属性被更改。我是 JavaScript 的新手，所以我不确定是什么导致堆栈溢出。我认为这是由于 console.log 的一个奇怪的范围问题，但我不确定。这是我的处理程序的样子

var handler = {
    set: function(obj, prop, value) {
         console.log(prop);
         obj[prop] = value;
    }
    get: function(obj, prop, receiver) {
          if (typeof prop !== 'symbol') console.log(prop);
          return obj[receiver];
    }
};

我正在使用此行将处理程序分配给名为 ctx 的 CanvasRenderingContext2D 元素。

 watchedCtx = new Proxy(ctx, handler);

我在 get 属性方法中添加了额外的检查，因为我从 get 方法收到了很多 Symbol 原语，我认为这是问题所在，所以我试图将它们过滤掉。有没有其他人遇到过这个问题或者知道是什么导致了这个问题？

Answer 1

在你的例子中，错字是 obj[receiver]，应该是 obj[prop]。 receiver 是一个对象（通常是您的代理本身），因此通过执行 obj[receiver]，您将 receiver 转换为字符串，这需要调用 get，然后触发你看到的无限递归。这将解决您的问题，但您现在可能想知道，那么 receiver 是什么？

在这种情况下，receiver 对于代理的正确操作至关重要。如果您正在编写代理，那么处理该问题的最简单方法是，您应该使用 Reflect 中的方法来确保您实际上正确地保留了行为。

var handler = {
  set: function(obj, prop, value, receiver) {
    console.log(prop);

    return Reflect.set(obj, prop, value, receiver);
  }
  get: function(obj, prop, receiver) {
    if (typeof prop !== 'symbol') console.log(prop);

    return Reflect.get(obj, prop, receiver);
  }
};

Reflect 方法执行代理会执行的完全原始行为，因此通过使用它们，您可以避免自己未正确实现它们的危险。

使用代理超过最大堆栈调用大小

Exceeding maximum stack call size using Proxies

javascript

debugging

stack

proxies

ecmascript-6