Los objetos Proxy en Javascript sirven para interceptar las acciones que se realizan sobre un objeto. El objetivo de estos objetos es poder personalizar el comportamiento de los objetos a nuestro antojo. En este tutorial te explicaremos cómo usar los objetos Proxy en Javascript.
¿Qué es un objeto Proxy?
Un objeto Proxy es un objeto que intercepta las acciones realizadas en otro objeto, permitiendo personalizar su comportamiento. Para crear un objeto Proxy en Javascript, debes llamar a la función Proxy.
La sintaxis de la función Proxy es la siguiente:
const proxyObject = new Proxy(target, handler);
Donde:
target: El objeto original al que se le aplicará el comportamiento customizado.handler: Un objeto con propiedades que definen cómo se personaliza el comportamiento del objeto objetivo.
Estas son algunas de las propiedades que se pueden usar en el objeto handler:
get: Permite personalizar el comportamiento al leer una propiedad del objeto objetivo.set: Permite personalizar el comportamiento al escribir una propiedad del objeto objetivo.apply: Permite personalizar el comportamiento de la llamada a una función dentro del objeto objetivo.
Ejemplo 1: Interceptando el acceso a una propiedad
Veamos un ejemplo de cómo interceptar el acceso a una propiedad de un objeto usando un objeto Proxy. En este caso, vamos a interceptar la llamada a la propiedad name y convertirla a mayúsculas.
const obj = { name: 'John' };
const handler = {
get: function(target, prop, receiver) {
const value = Reflect.get(target, prop, receiver);
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
}
};
const proxyObj = new Proxy(obj, handler);
console.log(proxyObj.name); // JOHNEn este ejemplo, el objeto handler tiene una propiedad get que se ejecutará cada vez que se intente acceder a una propiedad del objeto obj. En el cuerpo de la función get, usamos la función Reflect.get para obtener el valor de la propiedad del objeto original target. Luego, si el tipo de valor es una cadena, lo convertimos a mayúsculas antes de devolverlo. Si no, devolvemos el valor original.
Ejemplo 2: Interceptando la escritura de una propiedad
Veamos ahora un ejemplo de cómo interceptar la escritura de una propiedad de un objeto usando un objeto Proxy. En este caso, vamos a interceptar la escritura de la propiedad age y lanzar una excepción si el número es menor de lo esperado.
const obj = { name: 'John', age: 18 };
const handler = {
set: function(target, prop, value, receiver) {
if (prop === 'edad' && value < 18) {
throw new Error('Debes tener 18 años de edad.');
}
return Reflect.set(target, prop, value, receiver);
}
};
const proxyObj = new Proxy(obj, handler);
proxyObj.edad= 15; // throws "Debes tener 18 años."En este ejemplo, el objeto handler tiene una propiedad set que se ejecutará cada vez que se intente escribir una propiedad del objeto obj. En el cuerpo de la función set, verificamos si la propiedad que se está escribiendo es la propiedad age y si su valor es menor de 18. Si se cumple la condición, lanzamos una excepción con el mensaje «Debes tener 18 años».
Ejemplo 3: Interceptando la llamada a una función
Veamos ahora un ejemplo de cómo interceptar la llamada a una función de un objeto usando un objeto Proxy. En este caso, vamos a interceptar la llamada a la función getName y añadir el apellido del usuario a la cadena devuelta.
const obj = {
name: 'John',
lastName: 'Doe',
getName: function() {
return this.name;
}
};
const handler = {
apply: function(target, thisArg, args) {
const originalResult = Reflect.apply(target, thisArg, args);
return `${originalResult} ${thisArg.lastName}`;
}
};
const proxyObj = new Proxy(obj, handler);
console.log(proxyObj.getName()); // John DoeEn este ejemplo, el objeto handler tiene una propiedad apply que se ejecutará cada vez que se llame a la función getName del objeto obj. En el cuerpo de la función apply, usamos la función Reflect.apply para obtener el resultado de la llamada original a la función getName del objeto obj. Luego devolvemos una cadena con el resultado original más el apellido del objeto thisArg.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
