Proxy

Proxy

原創

2020-02-22 06:04

Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這裏表示由它來“代理”某些操作，可以譯爲“代理器”。

ES6 原生提供 Proxy 構造函數，用來生成 Proxy 實例。

var proxy = new Proxy(target, handler);

Proxy 對象的所有用法，都是上面這種形式，不同的只是handler參數的寫法。其中，new Proxy()表示生成一個Proxy實例，target參數表示所要攔截的目標對象，handler參數也是一個對象，用來定製攔截行爲。

實例：

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

下面是 Proxy 支持的攔截操作一覽，一共 13 種。

get(target, propKey, receiver)：攔截對象屬性的讀取，比如proxy.foo和proxy[‘foo’]。
set(target, propKey, value, receiver)：攔截對象屬性的設置，比如proxy.foo = v或proxy[‘foo’] = v，返回一個布爾值。
has(target, propKey)：攔截propKey in proxy的操作，返回一個布爾值。
deleteProperty(target, propKey)：攔截delete proxy[propKey]的操作，返回一個布爾值。
ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、- Object.keys(proxy)、for…in循環，返回一個數組。該方法返回目標對象所有自身的屬性的屬性名，而- Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。
getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象。
defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、- Object.defineProperties(proxy, propDescs)，返回一個布爾值。
preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值。
getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象。
isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。
setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。如果目標對象是函數，那麼還有兩種額外操作可以攔截。
apply(target, object, args)：攔截 Proxy 實例作爲函數調用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
construct(target, args)：攔截 Proxy 實例作爲構造函數調用的操作，比如new proxy(…args)。