Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 16, 2020 05:29 pm GMT

Proxy & Reflect API in Javascript

These both feature appears in ES6, both work very well together !

First,

Proxy

A proxy is an exotic object, he doesn't have properties ! It wraps the behavior of an object. It needs two arguments.

const toto = new Proxy(target, handler)

Enter fullscreen mode Exit fullscreen mode

target: is the object that will be proxied/wrapped by the proxy.

handler: is the configuration of the proxy, it will intercept operation on the target (get, set ect..), you will see example !

Thanks to proxy you can create traps like this

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 // 55totoProxy.c // This c prop don't exist on this object !

Enter fullscreen mode Exit fullscreen mode

Each internal Object 'method' has his own Target function

Bellow it's a list of object methods equivalent into Target

object method	target
object[prop]	get
object[prop] = 55	set
new Object()	construct
Object.keys	ownKeys

Here the full list https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy

Parameters of Target function can change depending on the function.

For example, for get function take (target, prop, receiver(proxy itself)) but for set function it's (target, prop, value (to set), receiver)

Example of usage

We can create secret property !

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 methods return boolean,    // in order to let us know if the value has been correctly 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'}

Enter fullscreen mode Exit fullscreen mode

Reflect

Reflect is a static class that simplifies creation of proxy.

Each internal Object method has his own Reflect methods

object method	Reflect
object[prop]	Reflect.get
object[prop] = 55	Reflect.set
new Object()	Reflect.construct
Object.keys	Reflect.ownKeys

Here the full list https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

Why use it ? Because it works very nicely with Proxy ! It accepts the same parameters as handler of proxy !

const toto = { a: 55, b:66 }const handler = {  get(target, prop, receiver) {   // Equal to 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) {     // Equal to target[prop] = value     // Reflect.set return boolean, it's perfect     // since set handler need to return boolean     return Reflect.set(target, prop, receiver)  },}const totoProxy = new Proxy (toto, handler)

Enter fullscreen mode Exit fullscreen mode

So as you can see Proxy and Reflect api are usefull but you will not use it every day, it can be nice to use it in order to make traps or hide some object property. Another solution exist for that like Symbol for example.

If you are using Vue Framework, try to modify a props object of component, it will trigger warn log from Vue, this feature is using Proxy :) !

Original Link: https://dev.to/codeozz/proxy-reflect-api-in-javascript-51la

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To