【Web前端基礎知識】js的捕捉器---Proxy代理對象

在談到js的是trap的時候，我們首先要了解一下什么是Proxy代理?Proxy對象用于創建一個對象的代理，從而實現基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數調用等)。[來源于MDN的說明]。

簡單的舉個例子:

1. var p = new Proxy(our, handlers); 
2.    //p就是通過new Proxy創建的代理對象 

那我們為什么會需要代理呢?這個代理就像是我們生活中的每一次次的消費之后的記賬，舉個例子來說吧。

1. // our代表我們，wallet屬性指我們錢包，現在我們錢包里有200元 
2. // con指我們的消費次數，每次消費次數都會加1， 記一筆賬 
3. var our = {wallet: 200} 
4. var con = 0 
5.  
6. // 這個月，我們喝了四次透心涼心飛揚，每次的消費我們都會記上一筆 
7.  
8. // 今天消費3元 
9. con++ 
10. our.wallet =197 
11.  
12. // 今天消費3元 
13. con++ 
14. our.wallet = 194 
15.  
16. // 今天消費3元 
17. con++ 
18. our.wallet = 191 
19.  
20. // 今天消費3元 
21. con++ 
22. our.wallet = 188 
23.  
24. // 今天消費3元 
25. con++ 

每次我們在修改錢包剩余金額時，都要執行一次con++去執行一次記賬的操作，那么有沒有更簡單的方式，可以讓我們不需要每次都寫上一行代碼來增加消費的次數呢?

答案當然是有的，它就是Proxy代理對象。我們可以通過使用代理對象，假設你想對目標對象的屬性操作全部改為對代理對象相同屬性的操作，那么在代理對象中，它提供了對屬性獲取 [[get]] 和修改 [[set]] 等操作的攔截，js中將這種的攔截稱為捕捉器。

通過這種的捕捉器，我們就可以捕獲到代碼中對屬性的操作時機，讓我們能夠先執行我們自定義的業務邏輯代碼。

因為我們對目標對象的屬性操作改為了對代理對象相同的屬性操作，所以就需要我們在最后通過Reflact執行目標對象的原始操作。

1. var con = 0 
2. // 目標對象 
3. var our = {wallet: 200} 
4. // 捕獲器trap 
5. var handlers = { 
6.     set(target, key, val) { 
7.         // target 目標對象 
8.         // key 代理對象要修改的屬性 
9.          
10.         // 記錄一筆消費 
11.         con++ 
12.         // 通過Reflact對象觸發原始目標對象的屬性操作 
13.         // 相當于執行 target[key] = val 
14.         Reflect.set(target, key, val) 
15.     } 
16. } 
17. // 代理對象 
18. var p = new Proxy(our, handlers) 
19. // 將對目標對象our的屬性wallet操作改為代理對象相同屬性wallet的操作 
20. p.wallet = 197 
21. p.wallet = 194 
22. p.wallet = 191 
23. p.wallet = 188 
24. p.wallet = 185 
25.  
26. console.log(our.wallet) // 185 
27. console.log(consume) // 5 

那我們不禁開始思考一個問題：如何取消代理呢?

假如某一天，我們實現了財務自由，不需要再精打細算的記錄每一筆消費時，就可能需要取消之前的代理了，那我們應該如何操作呢，接下來告訴你，代碼如下：

1. var con = 0 
2. var our = {wallet:  200} 
3. var handlers = { 
4.     set(target, key, val) { 
5.         con++ 
6.         Reflect.set(target, key, val) 
7.     } 
8. } 
9.  
10. // 使用Proxy.revocable創建代理 
11. var t = Proxy.revocable(our, handlers) 
12. var p = t.proxy 
13. var prevoke = t.revoke 
14.  
15. // 使用代理對象進行消費記賬 
16. p.wallet = 197 
17. p.wallet = 194 
18. p.wallet = 191 
19.  
20. // 某一天，我們實現了一個小目標 
21. p.wallet = 100000000 
22. // 我們不再需要記賬，取消之前創建的代理 
23. prevoke() // 執行prevoke即可 
24.  
25. p.wallet = 99999997 // 會顯示報錯 （代理取消就不能再使用）