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

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

簡(jiǎn)單的舉個(gè)例子:

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

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

1. // our代表我們，wallet屬性指我們錢(qián)包，現(xiàn)在我們錢(qián)包里有200元 
2. // con指我們的消費(fèi)次數(shù)，每次消費(fèi)次數(shù)都會(huì)加1， 記一筆賬 
3. var our = {wallet: 200} 
4. var con = 0 
5.  
6. // 這個(gè)月，我們喝了四次透心涼心飛揚(yáng)，每次的消費(fèi)我們都會(huì)記上一筆 
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++ 

每次我們?cè)谛薷腻X(qián)包剩余金額時(shí)，都要執(zhí)行一次con++去執(zhí)行一次記賬的操作，那么有沒(méi)有更簡(jiǎn)單的方式，可以讓我們不需要每次都寫(xiě)上一行代碼來(lái)增加消費(fèi)的次數(shù)呢?

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

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

因?yàn)槲覀儗?duì)目標(biāo)對(duì)象的屬性操作改為了對(duì)代理對(duì)象相同的屬性操作，所以就需要我們?cè)谧詈笸ㄟ^(guò)Reflact執(zhí)行目標(biāo)對(duì)象的原始操作。

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

那我們不禁開(kāi)始思考一個(gè)問(wèn)題：如何取消代理呢?

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

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