Cómo crear un objeto proxy en JavaScript
Cuando se trabaja con objetos en JavaScript, a menudo se desea tener un control más detallado sobre la forma en que se accede a los mismos o cómo se comportan cuando se acceden. La API de objetos proxy de JavaScript permite interceptar y personalizar las operaciones realizadas en un objeto, lo que brinda una flexibilidad excepcional para la manipulación de objetos. En este artículo, te enseñaremos cómo crear un objeto proxy en JavaScript.
📋 Aquí podrás encontrar✍
¿Qué es un objeto proxy en JavaScript?
Un objeto proxy es una representación de otro objeto que se comporta como un intermediario entre el objeto original y un código que interactúa con él. Cuando se accede a una propiedad de un objeto proxy, la operación no se realiza directamente en el objeto original, sino en el objeto proxy que lo envuelve. Esto le permite al objeto proxy interceptar la operación y modificarla o rechazarla.
Cómo crear un objeto proxy en JavaScript
Para crear un objeto proxy en JavaScript, se utiliza la constructora `Proxy`. El constructor `Proxy` toma dos argumentos: el objeto original que se va a envolver y un objeto controlador que define el comportamiento personalizado para el objeto proxy.
```
let objetoOriginal = { nombre: "Juan", edad: 32 };
let objetoProxy = new Proxy(objetoOriginal, {
get: function(obj, prop) {
console.log('Se accedió a la propiedad ' + prop);
return obj[prop];
},
set: function(obj, prop, valor) {
console.log('Se estableció el valor de la propiedad ' + prop + ' a ' + valor);
obj[prop] = valor;
return true;
}
});
objetoProxy.nombre; // Se accedió a la propiedad nombre
// "Juan"
objetoProxy.edad = 33; // Se estableció el valor de la propiedad edad a 33
// 33
```
En el ejemplo anterior, creamos un objeto proxy que envuelve un objeto original con dos propiedades: `nombre` y `edad`. En el objeto controlador, definimos dos métodos para interceptar la lectura y escritura de propiedades. El método `get` se invoca cuando se accede a una propiedad del objeto proxy. En este caso, simplemente imprimimos un mensaje en la consola y devolvemos el valor de la propiedad correspondiente del objeto original. El método `set` se invoca cuando se establece un valor para una propiedad en el objeto proxy. En este caso, imprimimos un mensaje en la consola, establecemos el valor de la propiedad correspondiente en el objeto original y devolvemos `true` para indicar que la operación fue exitosa.
¿Cuándo es útil utilizar objetos proxy?
Los objetos proxy resultan útiles cuando se desea agregar comportamiento personalizado a un objeto determinado. Por ejemplo, se puede utilizar un objeto proxy para generar una lista de propiedades disponibles en un objeto, para validar valores antes de su asignación a una propiedad, para aplicar reglas de acceso a propiedades en un objeto, entre otras aplicaciones.
Ejemplos prácticos de uso de objetos proxy
#### Interceptar una llamada a método
Se puede utilizar un objeto proxy para interceptar una llamada a método en un objeto y realizar alguna acción adicional antes o después de la llamada.
```
let objetoOriginal = {
sumar: function(a, b) {
return a + b;
}
};
let objetoProxy = new Proxy(objetoOriginal, {
apply: function(target, thisArg, argumentList) {
console.log('Se invocó la función ' + target.name);
console.log(argumentList);
const resultado = target.apply(thisArg, argumentList);
console.log('El resultado es ' + resultado);
return resultado;
}
});
objetoProxy.sumar(2, 3);
// Se invocó la función sumar
// [2, 3]
// El resultado es 5
// 5
```
En el ejemplo anterior, creamos un objeto proxy que intercepta la llamada al método `sumar` en el objeto original. Al invocar el método en el objeto proxy, se imprimirá un mensaje por consola antes y después de la llamada, se mostrarán los argumentos de entrada y se devolverá el resultado de la llamada al método original.
#### Ocultar propiedades internas
Se puede utilizar un objeto proxy para ocultar propiedades internas de un objeto y protegerlo de modificaciones externas.
```
let objetoOriginal = {
propiedadPublica: 'Valor público',
propiedadInterna: 'Valor interno'
};
let objetoProxy = new Proxy(objetoOriginal, {
ownKeys: function(target) {
return Object.keys(target).filter(key => key !== 'propiedadInterna');
},
getOwnPropertyDescriptor: function(target, prop) {
if (prop === 'propiedadInterna') {
return undefined;
}
return Object.getOwnPropertyDescriptor(target, prop);
},
has: function(target, prop) {
return prop !== 'propiedadInterna' && prop in target;
}
});
console.log(Object.keys(objetoProxy));
// ['propiedadPublica']
objetoProxy.propiedadInterna = 'Nuevo valor';
console.log(objetoProxy.propiedadInterna);
// undefined
console.log(objetoOriginal.propiedadInterna);
// Valor interno
```
En el ejemplo anterior, creamos un objeto proxy que oculta la propiedad interna `propiedadInterna` del objeto original. Utilizamos tres métodos del objeto controlador para personalizar el comportamiento del objeto proxy. El método `ownKeys` se utiliza para obtener las claves de las propiedades del objeto proxy. En este caso, devolvemos un arreglo con las claves del objeto original, excepto aquellas que corresponden a la propiedad interna. El método `getOwnPropertyDescriptor` se utiliza para obtener el descriptor de una propiedad del objeto proxy. En este caso, devolvemos `undefined` si se trata de la propiedad interna y el descriptor original para las demás propiedades. Finalmente, el método `has` se utiliza para verificar si el objeto proxy tiene una propiedad particular. En este caso, verificamos si se trata de la propiedad interna y devolvemos `false` si es así.
Conclusión
Los objetos proxy en JavaScript permiten la personalización del comportamiento de los objetos y brindan una mayor flexibilidad en el control de las operaciones realizadas en ellos. A través de la constructora `Proxy`, se pueden interceptar y modificar las operaciones realizadas en un objeto, lo que permite agregar comportamiento personalizado. Los objetos proxy son útiles en diferentes situaciones, como la validación de valores, la aplicación de reglas de acceso y la generación de listas de propiedades disponibles. ¡Experimenta con ellos y descubre todo su potencial!
Preguntas frecuentes
¿Puedo crear objetos proxy anidados?
Sí, se pueden crear objetos proxy que envuelvan otros objetos proxy. De hecho, esto puede ser útil para crear cadenas de responsabilidad dentro de una aplicación.
¿Hay alguna restricción en cuanto a los tipos de valores que se pueden envolver en un objeto proxy?
Los objetos proxy solo pueden envolver objetos y funciones, ya que son los únicos tipos de valores que permiten la definición de propiedades. No es posible envolver tipos de valores primitivos como números, strings o booleanos.
¿Los objetos proxy afectan el rendimiento de la aplicación?
Aunque los objetos proxy tienen una sobrecarga adicional en cuanto a la personalización de operaciones, el impacto en el rendimiento depende en gran medida del uso que se haga de ellos. Cada aplicación puede presentar diferentes necesidades en cuanto a personalización de objetos, y es importante evaluar el rendimiento de la aplicación en cada caso particular.
Subir
Deja una respuesta