這兩個(gè)功能都出現(xiàn)在ES6中，兩者配合得非常好!

Proxy

**proxy **是一個(gè)外來(lái)的對(duì)象，他沒(méi)有屬性! 它封裝了一個(gè)對(duì)象的行為。它需要兩個(gè)參數(shù)。

1. const toto = new Proxy(target, handler)

**target: **是指將被代理/包裹的對(duì)象 **handler: **是代理的配置，它將攔截對(duì)目標(biāo)的操作(獲取、設(shè)置等)

多虧了 proxy ，我們可以創(chuàng)建這樣的 traps ：

1. const toto = { a: 55, b:66 }
2. const handler = {
3. get(target, prop, receiver) {
4. if (!!target[prop]) {
5. return target[prop]
6. }
7. return `This ${prop} prop don't exist on this object !`
8. }
9. }
11. const totoProxy = new Proxy (toto, handler)
13. totoProxy.a // 55
14. totoProxy.c // This c prop don't exist on this object !

每個(gè)內(nèi)部對(duì)象的 "方法" 都有他自己的目標(biāo)函數(shù)

下面是一個(gè)對(duì)象方法的列表，相當(dāng)于進(jìn)入了 Target:

1. object methodtargetobject[prop]getobject[prop] = 55setnew Object()constructObject.keysownKeys

目標(biāo)函數(shù)的參數(shù)可以根據(jù)不同的函數(shù)而改變。

例如，對(duì)于get函數(shù)取(target, prop, receiver(proxy本身))，而對(duì)于 set 函數(shù)取(target, prop, value (to set)， receiver)

例子

我們可以創(chuàng)建私有屬性。

1. const toto = {
2. name: 'toto',
3. age: 25,
4. _secret: '***'
5. }
7. const handler = {
8. get(target, prop) {
9. if (prop.startsWith('_')) {
10. throw new Error('Access denied')
11. }
12. return target[prop]
13. },
14. set(target, prop, value) {
15. if (prop.startsWith('_')) {
16. throw new Error('Access denied')
17. }
18. target[prop] = value
19. // set方法返回布爾值
20. // 以便讓我們知道該值是否已被正確設(shè)置 !
21. return true
22. },
23. ownKeys(target, prop) {
24. return Object.keys(target).filter(key => !key.startsWith('_'))
25. },
26. }
28. const totoProxy = new Proxy (toto, handler)
29. for (const key of Object.keys(proxy1)) {
30. console.log(key) // 'name', 'age'
31. }

Reflect

Reflect 是一個(gè)靜態(tài)類，簡(jiǎn)化了 proxy 的創(chuàng)建。

每個(gè)內(nèi)部對(duì)象方法都有他自己的 Reflect 方法

1. object methodReflectobject[prop]Reflect.getobject[prop] = 55Reflect.setobject[prop]Reflect.getObject.keysReflect.ownKeys

? 為什么要使用它?因?yàn)樗蚉roxy一起工作非常好! 它接受與 proxy 的相同的參數(shù)!

1. const toto = { a: 55, b:66 }
3. const handler = {
4. get(target, prop, receiver) {
5. // 等價(jià) target[prop]
6. const value = Reflect.get(target, prop, receiver)
7. if (!!value) {
8. return value
9. }
10. return `This ${prop} prop don't exist on this object !`
11. },
12. set(target, prop, value, receiver) {
13. // 等價(jià) target[prop] = value
14. // Reflect.set 返回 boolean
15. return Reflect.set(target, prop, receiver)
16. },
17. }
19. const totoProxy = new Proxy (toto, handler)

所以你可以看到 Proxy 和 Reflect api是很有用的，但我們不會(huì)每天都使用它，為了制作陷阱或隱藏某些對(duì)象的屬性，使用它可能會(huì)很好。

如果你使用的是Vue框架，嘗試修改組件的 props 對(duì)象，它將觸發(fā)Vue的警告日志，這個(gè)功能是使用 Proxy :) !

作者：CodeOz 譯者：前端小智

來(lái)源：dev 原文：https://dev.to/codeoz/proxy-reflect-api-in-javascript-51la

原文鏈接：https://www.toutiao.com/a7034006554567410209/