¿Cómo funcionan los objetos proxy en JavaScript?
Un objeto proxy de JavaScript le permite interceptar y personalizar el comportamiento de otro objeto, sin modificar el original.
Mediante el uso de objetos proxy, puede validar datos, proporcionar funciones adicionales y controlar el acceso a propiedades y funciones.
Descubra todo sobre los usos de los objetos proxy y cómo puede crearlos en JavaScript.
Creación de un objeto proxy
En JavaScript, puede crear objetos proxy utilizando el constructor Proxy . Este constructor toma dos argumentos: un objeto de destino para envolver el proxy y un objeto controlador cuyas propiedades definen el comportamiento del proxy cuando realiza operaciones.
Toma estos argumentos y crea un objeto que puede usar en lugar del objeto de destino. Este objeto creado puede redefinir operaciones básicas como obtener, establecer y definir propiedades. También puede usar estos objetos proxy para registrar accesos a propiedades y validar, formatear o desinfectar entradas.
Por ejemplo:
const originalObject = {
foo: "bar"
}
const handler = {
get: function(target, property) {
return target[property];
},
set: function(target, property, value) {
target[property] = value;
}
};
const proxy = new Proxy(originalObject, handler)
Este código crea un objeto de destino, originalObject , con una sola propiedad, foo , y un objeto controlador, handler . El objeto controlador contiene dos propiedades, get y set . Estas propiedades se conocen como trampas.
Una trampa de objeto proxy es una función que se llama cada vez que realiza una acción específica en un objeto proxy. Las trampas le permiten interceptar y personalizar el comportamiento del objeto proxy. Acceder a una propiedad desde el objeto proxy llama a get trap, y modificar o manipular una propiedad desde el objeto proxy llama a set trap.
Finalmente, el código crea un objeto proxy con el constructor Proxy . Pasa originalObject y handler como el objeto de destino y el controlador, respectivamente.
Uso de objetos proxy
Los objetos proxy tienen varios usos en JavaScript, algunos de los cuales son los siguientes.
Adición de funcionalidad a un objeto
Puede usar un objeto proxy para envolver un objeto existente y agregar nuevas funciones, como registro o manejo de errores, sin modificar el objeto original.
Para agregar una nueva funcionalidad, deberá usar el constructor Proxy y definir una o más trampas para las acciones que desea interceptar.
Por ejemplo:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.lastName); // Getting property "lastName"Martins
proxy.age = 23; // Setting property "age" to value "23"
Este bloque de código agrega funcionalidad a través de las trampas de proxy, get y set . Ahora, cuando intente acceder o modificar una propiedad de userObject , el objeto proxy primero registrará su operación en la consola antes de acceder o modificar la propiedad.
Validación de datos antes de configurarlos en un objeto
Puede usar objetos proxy para validar datos y asegurarse de que cumplan con ciertos criterios antes de establecerlos en un objeto. Puede hacerlo definiendo la lógica de validación en una trampa establecida en el objeto controlador .
Por ejemplo:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
if (
property === "age" &&
typeof value == "number" &&
value > 0 &&
value < 120
) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
} else {
throw new Error("Invalid parameter. Please review and correct.");
}
},
};
const proxy = new Proxy(userObject, handler);
proxy.age = 21;
Este bloque de código agrega reglas de validación a la trampa establecida . Puede asignar cualquier valor a la propiedad de edad en una instancia de userObject . Pero, con las reglas de validación agregadas, solo puede asignar un nuevo valor a la propiedad de edad si es un número, mayor que 0 y menor que 120. Cualquier valor que intente establecer en la propiedad de edad que no cumpla con los criterios requeridos activará un error e imprimirá un mensaje de error.
Controlar el acceso a las propiedades de los objetos
Puede usar objetos proxy para ocultar ciertas propiedades de un objeto. Hágalo definiendo la lógica de restricción en obtener trampas para las propiedades a las que desea controlar el acceso.
Por ejemplo:
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
phone: 1234567890,
email: "foo@bar.com",
};
const handler = {
get: function (target, property) {
if (property === "phone" || property === "email") {
throw new Error("Access to info denied");
} else {
console.log(`Getting property "${property}"`);
return target[property];
}
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error
El bloque de código anterior agrega ciertas restricciones a la trampa get . Inicialmente, puede acceder a todas las propiedades disponibles en userObject . Las reglas agregadas impiden el acceso a información confidencial, como el correo electrónico o el teléfono del usuario. Intentar acceder a cualquiera de estas propiedades generará un error.
Otras trampas de proxy
Las trampas get y set son las más comunes y útiles, pero hay otras 11 trampas proxy de JavaScript. Están:
- apply : la trampa de aplicación se ejecuta cuando llama a una función en el objeto proxy.
- construct : la trampa de construcción se ejecuta cuando usa el operador new para crear un objeto a partir del objeto proxy.
- deleteProperty : la trampa deleteProperty se ejecuta cuando usa el operador de eliminación para eliminar una propiedad del objeto proxy.
- has : la trampa has se ejecuta cuando usas el operador in para verificar si existe una propiedad en el objeto proxy.
- ownKeys : la trampa ownKeys se ejecuta cuando llama a la función Object.getOwnPropertyNames o Object.getOwnPropertySymbols en el objeto proxy.
- getOwnPropertyDescriptor : la trampa getOwnPropertyDescriptor se ejecuta cuando llama a la función Object.getOwnPropertyDescriptor en el objeto proxy.
- defineProperty : la trampa defineProperty se ejecuta cuando llama a la función Object.defineProperty en el objeto proxy.
- preventExtensions : la trampa preventExtensions se ejecuta cuando llama a la función Object.preventExtensions en el objeto proxy.
- isExtensible : la trampa isExtensible se ejecuta cuando llama a la función Object.isExtensible en el objeto proxy.
- getPrototypeOf : la trampa getPrototypeOf se ejecuta cuando llama a la función Object.getPrototypeOf en el objeto proxy.
- setPrototypeOf : la trampa setPrototypeOf se ejecuta cuando llama a la función Object.setPrototypeOf en el objeto proxy.
Al igual que las trampas establecer y obtener , puede usar estas trampas para agregar nuevas capas de funcionalidad, validación y control a su objeto sin modificar el original.
Los contras de los objetos proxy
Los objetos proxy pueden ser una herramienta poderosa para agregar funcionalidad personalizada o validación a un objeto. Pero también tienen algunos inconvenientes potenciales. Uno de esos inconvenientes es la dificultad de depuración, ya que puede ser difícil ver lo que sucede detrás de escena.
Los objetos proxy también pueden ser difíciles de usar, especialmente si no está familiarizado con ellos. Debe considerar cuidadosamente estos inconvenientes antes de usar objetos proxy en su código.
Deja una respuesta