La introducción de los proxies es otra de las novedades que presenta ES6. Los proxies son objetos que se colocan por encima de otro objeto, nos intercepta las operaciones que se hagan sobre él y nos permite modificar su comportamiento por defecto. Por ejemplo, podríamos interceptar cuando una propiedad del objeto es modificada y cambiar el comportamiento de esta operación. Aunque tenemos muchísimas más opciones según el interceptor que usemos en el proxy y la operación que hagamos.
En los proxies, hay tres términos que debemos de conocer:
- target: objeto sobre el que se colocará el proxy.
- handler: objeto que contiene las funciones que determinan el comportamiento del proxy.
- traps: funciones que contiene el objeto handler que nos permiten interceptar las operaciones que hagamos sobre el objeto y modificar su comportamiento por defecto. El listado de traps a los que podemos acceder lo puedes ver en este enlace.
Vamos a ver un ejemplo sencillo de cómo funcionan los proxies:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
const target = { a: 33, b: 'string', c: true, }; const handler = { get(target, prop) { console.log('Estamos accediendo a la propiedad: ' + prop); return target[prop]; }, set(target, prop, value) { console.log('Estamos modificando a la propiedad: ' + prop); if (prop == 'b' && typeof value !== 'string') { throw new Error('La propiedad ' + prop + ' debe ser una cadena de texto.'); } target[prop] = value; }, deleteProperty(target, prop) { console.log('Estamos eliminando la propiedad: ' + prop); delete target[prop]; }, }; let proxy = new Proxy(target, handler); // get console.log(proxy.a); // Resultado: // Estamos accediendo a la propiedad: a // 33 // set proxy.b = 'nuevo string'; // proxy.b = 123; // La propiedad b debe ser una cadena de texto. console.log(proxy.b); // Resultado: // Estamos modificando a la propiedad: b // Estamos accediendo a la propiedad: b // nuevo string // deleteProperty console.log(proxy.c); delete proxy.c; console.log(proxy.c); // Resultado: // 11 // Estamos eliminando la propiedad: c // Estamos accediendo a la propiedad: c // undefined |
Ejemplo en vivo del código anterior: https://repl.it/@vreaxe/ES6-Proxies
Nota: En el código de arriba podemos ver unos ejemplos de algunos traps, exactamente del get, set y deleteProperty. Si quieres indagar sobre el resto, porque hay bastantes más, puedes consultar este enlace.
Para explicar un poco el código, primero creamos un objeto target que será el objeto al cual le aplicaremos el proxy. Después, creamos el objeto handler con las funciones que nos permitirán modificar el comportamiento por defecto de las operaciones que hagamos sobre el objeto target.
En este objeto handler, tenemos una función get que intercepta cuando queremos obtener una propiedad del objeto target, una función set que nos intercepta cuando cambiamos el valor de una propiedad y una función deleteProperty que nos intercepta cuando estamos eliminando una propiedad. Yo, en este caso, he puesto en las funciones unos console.log() y una simple validación para que sirva como ejemplo, para ver que se puede modificar el comportamiento, pero realmente puedes ejecutar el código que desees dentro de estas funciones (traps).
Después, creamos el proxy (new Proxy) pasánsole como parámetros el target (objeto) y el handler. Y, para finalizar, hacemos ciertas operaciones para con el objeto para comprobar el funcionamiento de las funciones creadas en el handler.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR