JavaScript 中的代理對象

JavaScript 支持 setter 和 getter 已經很長時間了。他們用帶有 set 和 get 關鍵字的簡單語法來攔截對象的屬性訪問和值的修改操做。

1const obj = { 2  propValue: 1, 3  get prop() { 4    console.log("Retrieving property prop"); 5    return this.propValue; 6  }, 7  set prop(value) { 8    console.log("Setting property prop to", value); 9    this.propValue = value;10  }11};1213obj.prop; // 1 | [in console] Retrieving  property prop14obj.prop = 2; // [in console] Setting property prop to 215161234567891011121314複製代碼

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

• 它們僅限 get 和 get 操做（顯然）。

• 它們不能與相同鍵（即「常規」屬性）的數據入口一塊兒使用。

• 它們不是動態的，必須在對象聲明期間用靜態的 Object.defineProperty() 方法或經過使用計算值（僅適用於新的瀏覽器）顯式地應用於每一個屬性。

1// ... 2Object.defineProperty(obj, "anotherProp", { 3  get() { 4    /* Do something on get */ 5  }, 6  set(value) { 7    /*Do something on set */ 8  } 9});1011123456789複製代碼

所以，setter 和 getter 不太適合觀察整個對象或執行很是簡單的操做。所以，ECMAScript 6（ES6）引入了代理對象(Proxy object)。

代理（Proxy）

代理是內置的 JS 對象，可用於攔截和更改與對象相關的不一樣操做的行爲。

1const originalObj = { prop: 1, anotherProp: "value" }; 2const proxyObj = new Proxy(originalObj, { 3  get(obj, prop) { 4    console.log("Retrieving property", prop); 5    return obj[prop]; 6  }, 7  set(obj, prop, value) { 8    console.log("Setting property", prop, "to", value); 9    obj[prop] = value;10    return true;11  }12});13originalObj.prop; // 114originalObj.prop = 2;1516proxyObj.prop; // 2 | [in console] Retrieving property "prop"17proxyObj.anotherProp = "new value"; // [in console] Setting property "anotherProp" to "new value"18191234567891011121314151617複製代碼

很快咱們就能夠看到 Proxy 與 setter 和 getters 之間的區別。它們不只在語法上有所不一樣（Proxy 更爲冗長），並且在與原始對象的交互方面也有所不一樣。Proxy會建立一個新對象供你與之交互，而不是與原始對象進行交互，原始對象在使用 setter/getter 時會直接修改。

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

代理的 trap 是執行特定操做時調用的簡單方法。它們都是在單個 handler 對象上定義的，而後傳遞給 Proxy 構造函數。除此以外，它們不只限於 set() 和 get()，還包括一些有趣的操做，你能夠在 MDN 文檔(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)中找到。

可撤銷代理

若是出於某種緣由，你之後想取消或撤消代理，則應該用靜態的 Proxy.revocable() 方法建立它。

1// ... 2const revocableProxyObj = Proxy.revocable(originalObj, { 3  get(obj, prop) { 4    /* Do something on get */ 5  }, 6  set(obj, prop, value) { 7    /*Do something on set */ 8  } 9});10const proxy = revocableProxyObj.proxy;11proxy.prop; // OK12revocable.revoke();13proxy.prop // TypeError141512345678910111213複製代碼

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

調用時，此方法會使 Proxy 無效，使之後的任何調用均以 TypeError 結尾。以後該代理將被自動「垃圾收集」，從而釋放內存空間。

用例

與 setter/getter 相比，Proxy 可讓你作更多的事情。它們更快(http://jsbench.github.io/#dca840b71279a363b7750bf3a48e074c)（聲明後）而且更加靈活，使其成爲狀態管理等用例的理想解決方案。

Proxy 帶來了不少可定製性，使開發人員能夠控制 JS 的某些元功能（meta-functionalities）。因此它們並非向後兼容的，而且沒有任何徹底兼容的 polyfill 的選項存在。話雖如此，根據 Can I use…(https://caniuse.com/#feat=proxy) 的數據，整體的支持看上去不錯，覆蓋率約爲 93％（不支持 IE 和 Safari <10 的版本）。

歡迎關注前端公衆號：前端先鋒，免費領取 Vue、React 性能優化教程。