Proxies en JavaScript con ES6

Un Proxy por sí mismo no hace gran cosa, pero podemos definir ‘trampas’ para interceptar las operaciones de bajo nivel con el objeto target u objeto destino, incluidas las llamadas a funciones. Es aquí donde reside la potencia y lo interesante de los proxies.

Sintaxis:

const proxy = new Proxy(target, handler)

Os dejo el link de la lista de los posibles interceptores que podemos utilizar en un Proxy para que investiguéis un poco, ahora veamos en detalle algunos de los más interesantes .

get / set

Las ‘trampas’ más comunes serán las que intercepten cuando leemos o escribimos propiedades en el objeto, para ello podemos utilizar una ‘trampa’ get que se activará cada vez que se intente obtener un valor del objeto target, o un set que se activará cada vez que se intente setear una propiedad de nuestro objeto target.

let handler = { get (target, key, receiver) { console.log(`Get on property "${key}"`) return target[key] }, set (target, key, value, receiver) { console.log(`Set on property "${key}" with value "${key}"`) target[key] = value return true } } let target = {} let proxy = new Proxy(target, handler) proxy.foo = 'baz' // Set on property "foo" with value "baz" proxy.foo // Get on property "foo"

Si nos paramos a analizar el código anterior veremos que no tiene mucha ciencia, cada vez que intentemos recuperar el valor de una propiedad o setearlo, la consola nos pintará un mensaje, pero, paremonos un momento a repasar los argumentos que reciben cada uno de estos métodos:

  • target: referencia al objeto que deberá ser interceptado.
  • key: nombre de la propiedad.
  • value: valor para la propiedad.
  • receiver: se trata del obje