JavaScript 中的代理對象

JavaScript 中的代理對象

瘋狂的技術宅 前端先鋒

翻譯：瘋狂的技術宅
做者：Areknawo
來源：areknawo.com
正文共：2757 字
預計閱讀時間：7分鐘

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};
12
13obj.prop; // 1 | [in console] Retrieving  property prop
14obj.prop = 2; // [in console] Setting property prop to 2
15
161234567891011121314

可是，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});
10
11123456789

所以，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; // 1
14originalObj.prop = 2;
15
16proxyObj.prop; // 2 | [in console] Retrieving property "prop"
17proxyObj.anotherProp = "new value"; // [in console] Setting property "anotherProp" to "new value"
18
191234567891011121314151617

很快咱們就能夠看到 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; // OK
12revocable.revoke();
13proxy.prop // TypeError
14
1512345678910111213

該方法不是直接返回 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/