ES6: objeto Proxy, te echabamos de menos

Sigo con el conjunto de artículos dedicados a ES6 y no quiero perder la oportunidad para seguir escribiendo sobre peculiaridades que me voy encontrando por el camino. Si queréis saber un poco más sobre estos artículos podéis encontrarlos aquí y aquí.

En esta ocasión quería hablaros sobre el nuevo objeto Proxy, una característica de ES6 que todavía no está disponible para casi ningún navegador (como podemos comprobar en Can I Use) y para según que plataformas se encuentra en fase experimental. 

Una vez que se entienda por los desarrolladores el funcionamiento de Proxy, creo que va a dar unas posibilidades enormes y vamos a poder desarrollar muy poco código en según que situaciones. ¿Os explico un poco más sobre ello? No tardemos más entonces:

El objeto Proxy va a permitirnos, en el futuro, personalizar el comportamiento por defecto de muchas de las operaciones fundamentales que hace JavaScript internamente (llamados para la ocasión como traps). Es decir que vamos a poder extender este comportamiento por defecto para ciertas acciones en los objetos que deseemos.

El concepto nuevo es que si nosotros envolvemos a uno de nuestros objetos con un objeto Proxy determinado, el que nosotros hayamos configurado, podamos cambiar el comportamiento de, por ejemplo, el get y el set de una propiedad cualquiera de nuestro objeto JSON.

Son muchos los comportamientos por defecto o traps que se van a poder modificar. Hasta día de hoy la especificación nos indica que vamos a poder manipular el comportamiento de:

  • get, set y has,
  • isExtensible,
  • getPrototypeOf y setPrototypeOf,
  • preventExtensions,
  • getOwnProperty, defineProperty y deleteProperty,
  • enumerate,
  • ownKey,
  • apply
  • y construct.

No voy a entrar en que comportamiento por defecto provoca cada uno en JS y si decidís estudiar más sobre el objeto Proxy, podéis profundizar con el siguiente libro.

Si me gustaría detenerme en cómo podemos realizar este cambio de comportamiento. Un Proxy en ES6 está definido con la siguiente firma:

Proxy(target, handler)

Donde target indica el objeto que queremos envolver y handler es el objeto que contiene la sobreescritura de los métodos o comportamientos definidos por defecto por JS. Para explicar esto mejor he hecho un pequeño ejemplo.

La idea del ejemplo es sobreescribir los comportamientos por defecto del get y el set de un objeto cualquiera (en este caso un objeto vacío) para que directamente lo que yo obtenga u almacene en ellas sea persistido en localStorage.

Por decir de alguna manera, voy a crear de una forma muy fácil un enlace de datos directo desde mi objeto al localStorage. Para conseguir esto, he escrito el siguiente código:

El ejemplo consta de una función getStore que se encargará de devolvernos el objeto Proxy ya instanciado con el target de un objeto vacío y el handler.

En este handler vemos la sobreescritura de los comportamientos get y set y donde se realizará la obtención  y el guardado de los datos en el localStorage respectivamente.

Si nos detenemos en estos métodos vemos que el get recibe dos parámetros donde:

  • target: es el objeto en si del proxy y
  • property es la key de la propiedad que estoy manipulando.

En el set pasa lo mismo:

  • target: es el objeto en si del proxy y
  • property: es la key de la propiedad que estoy manipulando.
  • value: el value nuevo que se ha seteado al target.

Por tanto, comprobad que forma más sencilla de poder hacer un bindeo directo al localStorage. Simplemente tengo que ir incluyendo nuevas variables que se van a ir guardando en el localStorage sin preocuparme de la api, sin preocuparme de serializar y parsear los datos que se guardan.

Si echamos imaginación el Proxy va a ayudar mucho a la hora de este tipo de bindeos, a la hora de crear logs o profiling, incluso a la hora de crear una virtualización de ciertos objetos.

Yo estoy deseando que ya incluyan su implementación de manera masiva. Creo que nos los vamos a pasar muy bien con ello. ¿No lo creeis?

Nos leemos 🙂

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s