[[436812]]

這兩個功能都出現在ES6中，兩者配合得非常好!

Proxy

**proxy **是一個外來的對象，他沒有屬性! 它封裝了一個對象的行為。它需要兩個參數。

const toto = new Proxy(target, handler) 

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

多虧了 proxy ，我們可以創建這樣的 traps ：

const toto = { a: 55, b:66 } 
const handler = { 
 get(target, prop, receiver) { 
   if (!!target[prop]) { 
     return target[prop] 
    } 
    return `This ${prop} prop don't exist on this object !` 
  } 
} 
 
const totoProxy = new Proxy (toto, handler) 
 
totoProxy.a // 55 
totoProxy.c // This c prop don't exist on this object ! 

 每個內部對象的 "方法" 都有他自己的目標函數

下面是一個對象方法的列表，相當于進入了 Target:

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

目標函數的參數可以根據不同的函數而改變。

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

例子

我們可以創建私有屬性。

const toto = { 
   name: 'toto', 
   age: 25, 
   _secret: '***' 
} 
 
const handler = { 
  get(target, prop) { 
   if (prop.startsWith('_')) { 
       throw new Error('Access denied') 
    } 
    return target[prop] 
  }, 
  set(target, prop, value) { 
   if (prop.startsWith('_')) { 
       throw new Error('Access denied') 
    } 
    target[prop] = value 
    // set方法返回布爾值 
    // 以便讓我們知道該值是否已被正確設置 ! 
    return true 
  }, 
  ownKeys(target, prop) { 
     return Object.keys(target).filter(key => !key.startsWith('_')) 
  }, 
} 
 
const totoProxy = new Proxy (toto, handler) 
for (const key of Object.keys(proxy1)) { 
  console.log(key) // 'name', 'age' 
} 

Reflect

Reflect 是一個靜態類，簡化了 proxy 的創建。

每個內部對象方法都有他自己的 Reflect 方法

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

❓ 為什么要使用它?因為它和Proxy一起工作非常好! 它接受與 proxy 的相同的參數!

const toto = { a: 55, b:66 } 
 
const handler = { 
  get(target, prop, receiver) { 
   // 等價 target[prop] 
   const value = Reflect.get(target, prop, receiver) 
   if (!!value) { 
      return value  
   } 
   return `This ${prop} prop don't exist on this object !`  
  }, 
  set(target, prop, value, receiver) { 
     // 等價  target[prop] = value 
     // Reflect.set 返回 boolean 
     return Reflect.set(target, prop, receiver) 
  }, 
} 
 
const totoProxy = new Proxy (toto, handler) 

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

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

作者：CodeOz 譯者：前端小智

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