JavaScript 的代理對象

時間 2020-03-02

原文原文鏈接

做者：Areknawo
翻譯：瘋狂的技術宅javascript

原文：https://areknawo.com/javascri...前端

未經容許嚴禁轉載java

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

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)。github

代理（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 時會直接修改。segmentfault

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

代理的 trap 是執行特定操做時調用的簡單方法。它們都是在單個 handler 對象上定義的，而後傳遞給 Proxy 構造函數。除此以外，它們不只限於 set() 和 get()，還包括一些有趣的操做，你能夠在 MDN 文檔中找到。服務器

可撤銷代理

若是出於某種緣由，你之後想取消或撤消代理，則應該用靜態的 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 的版本）。