Unter Bezugnahme auf eine proxy'd dies innerhalb einer Klasse Getter

Question

Ich habe folgenden erfundenen Code:

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

Welche

NaN 
30 

auf Knoten 6.11.0 erzeugt.

Ich würde erwarten, dass der Code in der Klasse Getter, speziell this.baseage, durch den Proxy-Handler zu gehen, aber das scheint nicht der Fall zu sein. Gibt es einen Grund dafür?

Answer 1

return target[key]; ist nicht das gleiche Verhalten wie der Standard get Handler. Dies ist die Ursache der unterbrochenen get age Funktion.

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

    return target[key]; 
    } 
}; 

sollte

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

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

Wenn Sie target[key] tun, Ihnen die get age(){ fordern, aber Sie es mit target als this, fordern, die das new Animal Objekt ist, nicht der Proxy. Da das Proxy-Objekt das ist, das baseage behandelt, nicht das Animal, erhalten Sie undefined zurück.

In diesem Beispiel receiver ist das eigentliche Proxy-Objekt, so dass Sie möglicherweise receiver[key] tun könnten Ihren Schnipsel Arbeit zu haben, aber es gibt Tonnen mehr Grenzfälle, die Sie würde immer noch nicht in allgemeiner Art und Weise der Handhabung sein.

Jede einzelne Proxy Handler-Funktion hat eine Reflect.XX-Version, die das Standardverhalten verfügbar macht. Wenn Sie einen Proxy schreiben und nur so arbeiten möchten, wie er es normalerweise tun würde, sollten Sie Reflect verwenden.