Proxy 攔截

weixin_34128411發表於2018-10-22

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

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

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

let n1=new Proxy(target,handler);      target參數列示所要攔截的目標物件;handler引數也是一個物件,用來定製攔截行為;

攔截讀取屬性的例子:


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

如果handler沒有設定任何攔截,那就等同於直接通向原物件

8934731-7ad6776ed37cc5e0.png
如果handler沒有設定任何攔截,那就等同於直接通向原物件


一個技巧是將 Proxy 物件,設定到object.proxy屬性,從而可以在object物件上呼叫。


8934731-7b5cf099d91cee60.png


8934731-f1106e5e0d258b9d.png

更多關於Proxy例項的詳細用法請參考阮一峰老師的網站



關於Proxy基本使用的一個簡單demo:

8934731-8aa612f8450931d7.png
關於Proxy物件的一個demo演示



可以利用Proxy給一個物件的屬性 變成私有屬性 不能通過 物件.屬性名來訪問:


8934731-9d525c396a49e7f6.png
這個例子中,將person的id變成了私有屬性,一旦訪問person.id就在get裡攔截丟擲一個錯誤

相關文章