JavaScript 中的代理對象

2020 年 2 月 26 日
筆記

每日前端夜話第285篇

翻譯：瘋狂的技術宅

作者：Areknawo

來源：areknawo.com

正文共：2757 字

預計閱讀時間：7分鐘

JavaScript 支援 setter 和 getter 已經很長時間了。他們用帶有 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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)中找到。

可撤銷代理

如果出於某種原因，你以後想取消或撤消代理，則應該用靜態的 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 可以讓你做更多的事情。它們更快(http://jsbench.github.io/#dca840b71279a363b7750bf3a48e074c)（聲明後）並且更加靈活，使其成為狀態管理等用例的理想解決方案。

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

原文鏈接

https://areknawo.com/javascript-proxy-object-explained/