JavaScript支援 setters 和 getters 已經很長時間了。他們用帶有 set 和 get 關鍵字的簡單語法來攔截物件的屬性訪問和值的修改操作。

const obj = {
  propValue: 1,
  get prop() {
    console.log("Retrieving property prop");
    return this.propValue;
  },
  set prop(value) {
    console.log("Setting property prop to", value);
    this.propValue = value;
  }
};

obj.prop; // 1 | [in console] Retrieving  property prop
obj.prop = 2; // [in console] Setting property prop to 2

1234567891011121314
 

但是，setter/getter 有多個缺點：

• 它們僅限 get 和 get 操作（顯然）。
• 它們不能與相同鍵（即“常規”屬性）的資料入口一起使用。
• 它們不是動態的，必須在物件宣告期間用靜態的Object.defineProperty()方法或通過使用計算值（僅適用於新的瀏覽器）顯式地應用於每個屬性。

// ...
Object.defineProperty(obj, "anotherProp", {
  get() {
    /* Do something on get */
  },
  set(value) {
    /*Do something on set */
  }
});

123456789
 

因此，setter 和 getter 不太適合觀察整個物件或執行非常簡單的操作。因此，ECMAScript 6（ES6）引入了代理物件(Proxy object)。

代理（Proxy）

代理是內建的js物件，可用於攔截和更改與物件相關的不同操作的行為。

const originalObj = { prop: 1, anotherProp: "value" };
const proxyObj = new Proxy(originalObj, {
  get(obj, prop) {
    console.log("Retrieving property", prop);
    return obj[prop];
  },
  set(obj, prop, value) {
    console.log("Setting property", prop, "to", value);
    obj[prop] = value;
    return true;
  }
});
originalObj.prop; // 1
originalObj.prop = 2;

proxyObj.prop; // 2 | [in console] Retrieving property "prop"
proxyObj.anotherProp = "new value"; // [in console] Setting property "anotherProp" to "new value"

1234567891011121314151617
 

很快我們就可以看到 Proxy 與 setter 和 getters 之間的區別。它們不僅在語法上有所不同（Proxy 更為冗長），而且在與原始物件的互動方面也有所不同。Proxy會建立一個新物件供你與之互動，而不是與原始物件進行互動，原始物件在使用 setter/getter 時會直接修改。

在使用 Proxy 的情況下，原始物件（也稱為target）用作一種儲存。你對其執行的任何操作都會直接影響代理，但不會觸發其任何trap。

代理的 trap 是執行特定操作時呼叫的簡單方法。它們都是在單個handler物件上定義的，然後傳遞給 Proxy 建構函式。除此之外，它們不僅限於 set() 和 get()，還包括一些有趣的操作，你可以在MDN 文件中找到。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

可撤銷代理

如果出於某種原因，你以後想取消或撤消代理，則應該用靜態的Proxy.revocable()方法建立它。

// ...
const revocableProxyObj = Proxy.revocable(originalObj, {
  get(obj, prop) {
    /* Do something on get */
  },
  set(obj, prop, value) {
    /*Do something on set */
  }
});
const proxy = revocableProxyObj.proxy;
proxy.prop; // OK
revocable.revoke();
proxy.prop // TypeError

12345678910111213

該方法不是直接返回 Proxy 物件，而是返回一個物件，該物件包含位於proxy屬性下的實際 Proxy 和一個附加的revoke()方法。

呼叫時，此方法會使 Proxy 無效，使以後的任何呼叫均以TypeError結尾。之後該代理將被自動“垃圾收集”，從而釋放記憶體空間。

用例

與 setter/getter 相比，Proxy 可以讓你做更多的事情。它們更快（聲明後）並且更加靈活，使其成為狀態管理等用例的理想解決方案。

Proxy 帶來了很多可定製性，使開發人員可以控制js的某些元功能（meta-functionalities）。所以它們並不是向後相容的，並且沒有任何完全相容的 polyfill 的選項存在。話雖如此，根據Can I use...的資料，總體的支援看上去不錯，覆蓋率約為93％（不支援 IE 和 Safari <10 的版本）。