JavaScript 代理設置器不會進行第二次代理調用

Question

我有以下代碼使用 Proxy for Class setter。 在我的示例中，我正在跟蹤特定變量以更新其他一些變量。 我的 Setter 正在將所有更改的日志寫入控制台。 但是，如果我嘗試從 setter 本身修改變量，則會修改變量氣體，但不會調用代理。 是為了避免循環而設計的嗎？ 或者我錯過了什么？

 class darthVader { constructor() { return new Proxy(this, { set(obj, prop, value) { console.log(`Setting ${prop} to ${value}`) obj[prop] = value return true } }) } set resistance(val) { this._resistance= val this.darkSide = false } get resistance() { return this._R2D2 } } let newHero = new darthVader() newHero.resistance = 11 console.log(newHero.darkSide)

Answer 1

問題是你的陷阱只運行obj[prop] = value ，它在目標obj上設置一個屬性，而不是在代理上。 您應該做的是使用Reflect.set方法，該方法為設置陷阱提供默認實現，並需要一個可選的receiver參數。 這個接收器是設置器將對其進行評估的對象，您應該傳遞set陷阱的receiver參數（它將指代您newHero分配resistance的newHero代理）。

 class DarthVader { set resistance(val) { this._resistance= val this.darkSide = false } get resistance() { return this._R2D2 } } let newHero = new Proxy(new DarthVader, { set(target, prop, value, receiver) { console.log(`Setting ${prop} to ${value}`) return Reflect.set(target, prop, value, receiver) // ^^^^^^^^^^^ // obj[prop] = value } }); newHero.resistance = 11 console.log(newHero.darkSide)

Answer 2

該obj內部set方法指的是什么this是當你return new Proxy(this ，那對象不是代理，但darthVader實例本身-一個最在被創建的過程darthVader 。構造函數，因此，當您分配給obj的屬性時，您將屬性直接放在darthVader實例上，而不是放在代理實例（即newHero ）上。因此，不會調用代理方法。

如果你想遞歸調用代理，你可以在從構造函數返回它之前定義它（假設，作為變量名proxy ），然后在set方法中引用proxy ，但鑒於當前的邏輯，這會導致一個堆棧溢出，因為您會不斷調用代理的 setter：

 class darthVader { constructor() { const proxy = new Proxy(this, { set(obj, prop, value) { console.log(`Setting ${prop} to ${value}`) proxy[prop] = value return true } }) return proxy; } set resistance(val) { this._resistance = val this.darkSide = false } get resistance() { return this._R2D2 } } let newHero = new darthVader() newHero.resistance = 11 console.log(newHero.darkSide)