En este tutorial, aprenderá acerca de los proxies de JavaScript con la ayuda de ejemplos.
En JavaScript, los proxies (objeto proxy) se utilizan para envolver un objeto y redefinir varias operaciones en el objeto, como lectura, inserción, validación, etc. Proxy le permite agregar un comportamiento personalizado a un objeto o una función.
Creación de un objeto proxy
La sintaxis de proxy es:
new Proxy(target, handler);
Aquí,
new Proxy()- el constructor.target- el objeto / función que desea proxyhandler- puede redefinir el comportamiento personalizado del objeto
Por ejemplo,
let student1 = ( age: 24, name: "Felix" ) const handler = ( get: function(obj, prop) ( return obj(prop) ? obj(prop) : 'property does not exist'; ) ) const proxy = new Proxy(student1, handler); console.log(proxy.name); // Felix console.log(proxy.age); // 24 console.log(proxy.class); // property does not exist
Aquí, el get()método se utiliza para acceder al valor de propiedad del objeto. Y si la propiedad no está disponible en el objeto, devuelve la propiedad no existe.
Como puede ver, puede usar un proxy para crear nuevas operaciones para el objeto. Puede surgir un caso en el que desee verificar si un objeto tiene una clave en particular y realizar una acción basada en esa clave. En tales casos, se pueden utilizar proxies.
También puede pasar un controlador vacío. Cuando se pasa un controlador vacío, el proxy se comporta como un objeto original. Por ejemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( ); // passing empty handler const proxy1 = new Proxy(student, ()); console.log(proxy1); // Proxy (name: "Jack", age: 24) console.log(proxy1.name); // Jack
Controladores de proxy
Proxy proporciona dos métodos de manejo get()y set().
get () manejador
El get()método se utiliza para acceder a las propiedades de un objeto de destino. Por ejemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( return obj(prop); ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack
Aquí, el get()método toma el objeto y la propiedad como parámetros.
set () manejador
El set()método se utiliza para establecer el valor de un objeto. Por ejemplo,
let student = ( name: 'John' ) let setNewValue = ( set: function(obj, prop, value) ( obj(prop) = value; return; ) ); // setting new proxy let person = new Proxy(student, setNewValue); // setting new key/value person.age = 25; console.log(person); // Proxy (name: "John", age: 25)
Aquí, agese agrega una nueva propiedad al objeto de estudiante.
Usos de proxy
1. Para validación
Puede utilizar un proxy para la validación. Puede verificar el valor de una clave y realizar una acción basada en ese valor.
Por ejemplo,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( // check condition if (prop == 'name') ( return obj(prop); ) else ( return 'Not allowed'; ) ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack console.log(proxy.age); // Not allowed
Aquí, solo se puede acceder a la propiedad de nombre del objeto de estudiante. De lo contrario, devuelve No permitido.
2. Vista de solo lectura de un objeto
Puede haber ocasiones en las que no desee permitir que otros realicen cambios en un objeto. En tales casos, puede usar un proxy para hacer que un objeto solo sea legible. Por ejemplo,
let student = ( name: 'Jack', age: 23 ) const handler = ( set: function (obj, prop, value) ( if (obj(prop)) ( // cannot change the student value console.log('Read only') ) ) ); const proxy = new Proxy(student, handler); proxy.name = 'John'; // Read only proxy.age = 33; // Read only
En el programa anterior, uno no puede mutar el objeto de ninguna manera.
Si uno intenta mutar el objeto de alguna manera, solo recibirá una cadena que diga Solo lectura.
3. Efectos secundarios
Puede utilizar un proxy para llamar a otra función cuando se cumple una condición. Por ejemplo,
const myFunction = () => ( console.log("execute this function") ); const handler = ( set: function (target, prop, value) ( if (prop === 'name' && value === 'Jack') ( // calling another function myFunction(); ) else ( console.log('Can only access name property'); ) ) ); const proxy = new Proxy((), handler); proxy.name = 'Jack'; // execute this function proxy.age = 33; // Can only access name property
El proxy de JavaScript se introdujo a partir de la versión de JavaScript ES6 . Es posible que algunos navegadores no admitan completamente su uso. Para obtener más información, visite el proxy de JavaScript.
