Proxy

ladybug7發表於2024-06-12

1.概述

Proxy 用於修改某些操作的預設行為，等同於在語言層面做出修改，所以屬於一種“超程式設計”（meta programming），即對程式語言進行程式設計。

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

ES6 原生提供 Proxy 建構函式，用來生成 Proxy 例項。

var proxy = new Proxy(target, handler);

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

下面是一個攔截讀取屬性行為的例子。

var proxy = new Proxy({}, {
   get: function(target, propKey) {
       return 35;
   }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

上面程式碼中，作為建構函式，Proxy 接受兩個引數。第一個引數是所要代理的目標物件（上例是一個空物件），即如果沒有 Proxy 的介入，操作原來要訪問的就是這個物件；第二個引數是一個配置物件，對於每一個被代理的操作，需要提供一個對應的處理函式，該函式將攔截對應的操作。比如，上面程式碼中，配置物件有一個 get 方法，用來攔截對目標物件屬性的訪問請求。get 方法的兩個引數分別是目標物件和所要訪問的屬性。可以看到，由於攔截函式總是返回 35，所以訪問任何屬性都得到 35 。

注意，要使得 Proxy 起作用，必須針對 Proxy 例項（上例是 proxy 物件）進行操作，而不是針對目標物件（上例是空物件）進行操作。

相關文章