javascript - 在类 getter 中引用代理 this

Question

我有以下人为的代码:

class Animal {
  get age() {
    return this.baseage + 10;
  }

  age2() {
    return this.baseage + 10;
  }
}

const handler = {
  "get": function(target, key) {
     if (key === "baseage") {
       return 20;
     }

     return target[key];
  }
};

const animal = new Proxy(new Animal(), handler);

console.log(animal.age);
console.log(animal.age2());

产生

NaN
30

在节点 6.11.0 上。

我希望类 getter 中的代码，特别是 this.baseage，也通过代理的处理程序，但情况似乎并非如此。有什么理由吗？

Answer 1

return target[key]; 与默认的 get 处理程序不同相同的行为。这就是 get age 功能损坏的原因。

const handler = {
  "get": function(target, key) {
     if (key === "baseage") {
       return 20;
     }

     return target[key];
  }
};

应该是

const handler = {
  "get": function(target, key, receiver) {
     if (key === "baseage") {
       return 20;
     }

     return Reflect.get(target, key, receiver);
  }
};

当您执行 target[key] 时，您调用的是 get age(){，但您是通过 target 调用它的 this，这是 new Animal 对象，不是代理。由于 Proxy 对象是处理 baseage 而不是 Animal 的对象，因此您返回 undefined。

在此示例中，receiver 是实际的代理对象，因此您可能会执行 receiver[key] 来让您的代码片段正常工作，但是有 您仍然无法以一般方式处理的更多边缘情况。

每个单独的 Proxy 处理程序函数都有一个公开默认行为的 Reflect.XX 版本。每当您编写代理并且只是希望它像往常一样运行时，您应该使用 Reflect。