Módulo perteneciente al curso Programación avanzada con JavaScript y ECMAScript.

Una de las características nuevas más desconocidas para muchos desarrolladores que incorpora ECMAScript 2015 son los proxies.

Un proxy es un objeto que permite interceptar las operaciones (tales como llamar a un método o consultar una propiedad) que se realizan sobre un objeto y realizar determinadas acciones.

Los proxies permiten escenarios avanzados, imposibles en ES5, ya que pueden interceptar llamadas a métodos o propiedades realizados contra otros objetos, de forma totalmente transparente para quien realiza esas operaciones.

Las principales aplicaciones de los proxies son todas avanzadas y no se usarán a menudo, pero son una herramienta muy útil para conseguir, entre otras cuestiones avanzadas:

• La intercepción de llamadas a propiedades y métodos de objetos para modificar su comportamiento.
• El control y autorización de llamadas para seguridad y gestión del uso de objetos y funciones.
• Traza y log para seguimiento de llamadas de código.
• Creación de contratos para uso de código.
• La virtualización de objetos de modo que podamos crear objetos virtuales que utilicen a otros objetos por debajo pero modificando su comportamiento o actuando sobre varios objetos o propiedades al mismo tiempo.

En este módulo vamos cómo podemos crear los proxies y qué escenarios nos permiten solucionar.

Los proxies requieren soporte del motor de JavaScript por lo que no se pueden transpilar ni usar ningún polyfill para simularlos.

Crear un proxy no es muy complicado. Lo primero es tener presente que, dado que un proxy intercepta operaciones sobre un objeto, vamos a necesitar lógicamente un objeto al que interceptar. Este objeto no tiene que tener nada especial:

let obj = {
   get value() { return 42;}
}

Hemos definido un objeto obj con un getter (value) que devuelve el valor 42. Vamos ahora a crear un proxy que intercepte las llamadas a este getter y que imprima por consola que alguien ha llamado al getter:

let proxy = new Proxy(obj,
    {
        get(target, key, receiver) {
            console.log(`Prop ${key} was called`);
            return target[key];
        }    
    });
let v = proxy.value;
console.log(v);

Vamos a diseccionar el código. Para crear un proxy debemos crear un objeto del tipo Proxy. Para ello debemos pasar dos parámetros:

• El objeto cuyas operaciones queremos interceptar
• Un objeto que indica qué acciones queremos interceptar y qué queremos hacer cuando las interceptemos.

En este caso el objeto pasado (que se suele denominar handler) indica que queremos interceptar todas las operaciones que impliquen llamar a un getter.

Luego en la intercepción nos limitamos a imprimir por la consola cuál es la propiedad accedida y devolvemos el valor correcto de dicha propiedad (podríamos en efecto devolver cualquier otra cosa si quisiéramos).

Finalmente llamamos al getter value del proxy. Observa como el proxy no tiene definido dicho getter, pero se intercepta la operación y se ejecuta el código del proxy, el cual puede (si quiere) terminar llamando al objeto final.

Enseguida lo vamos a ver en la práctica y se entenderá mucho mejor. Pero antes analicemos las posibles intercepciones en los proxies.