【W(wǎng)eb前端基礎(chǔ)知識】js的捕捉器---Proxy代理對象

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

簡單的舉個例子:

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

那我們?yōu)槭裁磿�需要代理�?這個代理就像是我們生活中的每一次次的消費(fèi)之后的記賬，舉個例子來說吧。

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

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

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

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

因?yàn)槲覀儗δ繕?biāo)對象的屬性操作改為了對代理對象相同的屬性操作，所以就需要我們在最后通過Reflact執(zhí)行目標(biāo)對象的原始操作。

1. var con = 0 
2. // 目標(biāo)對象 
3. var our = {wallet: 200} 
4. // 捕獲器trap 
5. var handlers = { 
6.     set(target, key, val) { 
7.         // target 目標(biāo)對象 
8.         // key 代理對象要修改的屬性 
9.          
10.         // 記錄一筆消費(fèi) 
11.         con++ 
12.         // 通過Reflact對象觸發(fā)原始目標(biāo)對象的屬性操作 
13.         // 相當(dāng)于執(zhí)行 target[key] = val 
14.         Reflect.set(target, key, val) 
15.     } 
16. } 
17. // 代理對象 
18. var p = new Proxy(our, handlers) 
19. // 將對目標(biāo)對象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 

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

假如某一天，我們實(shí)現(xiàn)了財務(wù)自由，不需要再精打細(xì)算的記錄每一筆消費(fèi)時，就可能需要取消之前的代理了，那我們應(yīng)該如何操作呢，接下來告訴你，代碼如下：

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創(chuàng)建代理 
11. var t = Proxy.revocable(our, handlers) 
12. var p = t.proxy 
13. var prevoke = t.revoke 
14.  
15. // 使用代理對象進(jìn)行消費(fèi)記賬 
16. p.wallet = 197 
17. p.wallet = 194 
18. p.wallet = 191 
19.  
20. // 某一天，我們實(shí)現(xiàn)了一個小目標(biāo) 
21. p.wallet = 100000000 
22. // 我們不再需要記賬，取消之前創(chuàng)建的代理 
23. prevoke() // 執(zhí)行prevoke即可 
24.  
25. p.wallet = 99999997 // 會顯示報錯 （代理取消就不能再使用）