Curso JavaScript: 55. Proxies -

[@harrinsonA]

16:52 Resumen del concepto Proxy

[@federicolopez6198]

He pagado cursos, intente ingresar a un bootcamp pero nadie ha explicado tan bien como Jon, gran curso, me animas mucho a seguir, aunque no retenga todo, siento que entiendo todo mas facil contigo!

[@jonmircha]

😉👍🏻

[@xaviervelez9692]

La función del handler también se puede realizar de la siguiente manera const handlerPersona = { set(obj, prop, valor){ prop in obj?obj[prop] = valor:console.error(`La prop ${prop} no existe en el objeto`); } }

[@jonmircha]

😉👍🏻

[@carlosmariorestrepo-vn6qp]

Muchísimas gracias, por tanto esfuerzo para ayudarnos a entender; mucho mas fácil y mejor explicación no hay bendiciones

[@jonmircha]

👋🏻😉

[@paolarodriguez6342]

estuve buscando por toda la web y esto me ayudo a entenderlo mejor.. gracias por su dedicación

[@jonmircha]

😉🙌🏻

[@sofialopez6048]

excelente clase! Contenta de que llegue a un tercio del curso, vamos por mas!Gracias Jon!!! ojala todo lo que das te vuelva por mil!

[@jonmircha]

😉👋🏻

[@williamalexanderpineda6098]

Excelente curso compadre!

[@jonmircha]

👋🏻😉

[@nikolahs92]

sept 11 1969**Oct 4 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos

[@BronzasMoments]

Actualmente estoy siguiendo el de node js es un poco viejo pero aún sirve y explicas súper bien

[@leonsosa8932]

igual yo

[@Wiiiiizard]

🧙‍♂Muchas gracias!!!

[@jonmircha]

Un saludo

[@carlosjavierorozco8418]

Lo entendi, pero me hace falta practicarlo mas. Pero sigo pa´lante! Gracias!

[@jonmircha]

😉

[@johnherrera5913]

Master! Genial todos los cursos mil gracias por compartir sus conocimientos

[@jonmircha]

Con mucho gusto

[@timawid]

Cada video es una joya, todo muy bien explicado, eres el mejor Jon 🙌

[@jonmircha]

👋🏻😉

[@christianosorio9239]

Gracias profe. Aproveche y valide lo que menciono de la edad, además una manera más corta de validar el ingreso del nombre y el apellido es con esta expresión regular > if(prop === 'edad' && Math.sign(valor) === -1) if(prop === 'edad' && valor === 0)

[@andrescomba5121]

Excelente, muy bien explicado este tipo de Objeto... la verdad no lo usaba, por que no tenia muy claro su funcionamiento, gracias.... Jon... :)

[@jonmircha]

De nada :)

[@leomax522]

Bárbaro Jon, aunque no nos conozcamos, ya te siento como mi amigo. Si bien reconozco que he visto los videos muy rápido y he practicado, me siento como que cada vez me doy cuenta que me falta mucho, y debe ser así, pero estoy seguro que al seguir practicando y creando proyectos reales, estos conceptos van a aflorar en nuestras mentes y volveremos a tu fuente sagrada de videos a buscar las respuestas. Gracias Jon. Abrazo desde un pueblito pequeño de Argentina!!

[@jonmircha]

👋🏻😉

[@armandoWebDev]

Proxy es una API que actúa como un wrapper sobre el objeto que se invoca y permite "sobreescribir" los métodos default que ese objeto hereda por la cadena de prototipos del objecto Object. Si se necesita acceder a los métodos default dentro del proxy se utiliza la API Reflect

[@edwinroman30]

Muy interesante, de esta forma podre agregar mas seguridad a la hora de trabajar con Objetos.

[@hernansanabria9685]

excelente video gracias

[@jonmircha]

😉👍🏻

[@josealejandrotrejorivera498]

increíble todo lo que he aprendido en este curso. Gracias KENAI.

[@jonmircha]

[@NickelFirepowerNico]

Muchas gracias por esta clase sobre los Proxies!!! :D

[@jonmircha]

Con gusto

[@jonmircha]

Con gusto

[@cashedev]

estoy enviciado con todos tus videos

[@jonmircha]

😉👌🏻

[@BronzasMoments]

Gracias Bro estoy aprendiendo cosas que no había visto y de eso que pague un curso de javascript avanzado

[@jonmircha]

De nada, comparte para llegar a más gente :)

[@ronaldm.r]

Ya sé, hicieron eso de enseñarte cosas del DOM y a manejar ciertas cosas, pero este tipo de elementos nunca los vistes cierto? Me siento igual XD :'c

[@davidcardenas7737]

gracias profe por su conocimiento he aprendido muchísimos , éxitos , desde Colombia.

[@jonmircha]

De nada, comparte para llegar a más gente :)

[@perdomoyaneri8018]

Después de 4 semanas; Estoy en la clase número 55. Los temas más complejos para mí fueron: programación asincrónica y orientada a objetos. Al principio de los videos me fue muy fácil porque conocía los conceptos básicos de programación y antes de este curso hice más de 200 ejercicios de lógica de programación. Pero no sabía que después de la lógica había temas más importantes xd Antes me saltaba de lenguajes; y no tenía mi objetivo definido. Pero me gusta el fronend siempre quise estudiar diseño gráfico pero en mi país tardan en ofrecer cupos; en la mejor universidad según mi estado claro no me daba el tiro así que conseguí una beca de ingeniería en informática pero siempre me ha gustado mucho la tecnología. (pasaba horas en la computadora en mi juventud) Y poder ver algo relacionado como el frond end me emociona. Diseñar paginas dinámicas. Gracias a ti estoy cumpliendo mi objetivo. :3 Amèn

[@jonmircha]

👋🏻😉 A mí no, a tu constancia y disciplina, mi contenido sólo es un medio para el fin que cada uno le quiera dar

[@perdomoyaneri8018]

Siii Jon. Yo le dedico 4 horas al día. @@jonmircha Y muchas gracias:3

[@leonardoprone5967]

Se entendió perfecto, gracias Jon!

[@jonmircha]

Excelente!

[@joelleiva6952]

me gusto bastante esta clase, muy claro todo. Tambien hice un ejemplo con diferentes tipos vehiculos y los valide, para practicar Aca el codigo: const vehiculos = { tipo: "", color: "", velocidadKPH: "", } const manejador = { set (obj, prop, valor){ if (Object.keys(obj).indexOf(prop) === -1) return console.error(`"${prop}" no es un propiedad valida`) if ( (prop === "tipo" || prop === "color") && !(/^[A-Za-zñÑáéíóúÁÉÍÓÚ\s]+$/g.test(valor)) ) return console.error(`"${prop}" solo acepta letras`) if (prop === "velocidadKPH" && typeof valor !== 'number') return console.error(`"${prop}" solo acepta numeros`) if (prop === "velocidadKPH" && valor

[@jonmircha]

😉👍🏻

[@jaimealonsoprietopalomar6349]

Jon, buenas noches. Muy interesante tu video y como siempre excelentemente bien presentado y pedagógicamente bien explicado. Gracias !!! . PREGUNTA: No me está validando las restricciones del handler. Qué podría ser? No me muestra error y el código lo hago exactamente a como tu lo explicas. Le he dado vueltas por varios lados pero NO está evaluando las restricciones. Si me pudieras dar alguna orientación, te agradezco. Saludo cordial

[@jonmircha]

😮🤔

[@edgarzambrano3505]

profe que buen video , creamos el objeto, una nueva instancia del objeto en este caso proxy ,el proxy tiene dos valores el primero es la vinculación con el objeto padre , el segundo es el handler o controlador , en el proxy escribimos los valores que complementen a el objeto padre y mediante el handler o controlador vamos ejecutándolo a la medida que queramos ejecutar ,en caso de que creemos un valor en el proxy diferente a el padre este sera valido lo unico que tenemos que hacer es mediante el handler o controlador darle su respectiva validacion

[@jonmircha]

🤓👍🏻

[@yamilcaceres8825]

pregunta de esto Tipo no capturadoError: 'set' en proxy: trap devolvió falsish para la propiedad 'nombre' en proxies y bla bla bla Bueno yo lo solucione en el codigo html tenia esto y despues esto y no me salio error alguen me explique?

[@GAST0N]

Me salía el mismo error y no sabía por qué, lo pude solucionar leyendo tu comentario. Le tuve que sacar el "type="module".

[@r.w.s.2402]

Muy útil para validar!

[@jonmircha]

😉👍🏻

[@mursum117]

Al estar realizando el ejercicio me marcaba error porque al parecer el manejador deber retornar un true en caso de que se ejecute correctamente, no sé si lo actualizaron a día de hoy pero con eso ya pude continuar con la clase.

[@javierovallea3836]

Gracias por sus enseñansas.

[@jonmircha]

Con mucho gusto

[@eduardorodriguez3266]

una pregunta. porque al agregar el 'use strict' no me deja agregar las propiedades en el proxy? pero sin el sí 🤨

[@Ni_idea_de_tecnologia]

Muchas gracias por este gran vídeo Mr Mircha. En mi caso he modificado un poco las validaciones usando las expresiones regulares que no enseñaste tiempo atras y me han quedado así: if((key ==="nombre" ||key==="apellido")&& !(/^[a-zñáéíóúü]+$/ig.test(value)) ) { console.error(` `) } if(key ==="edad" &&(value100 || value===undefined||/^\d$/.test(value))){ console.error(`Los datos introducidos en el campo ${key}: ${value} no son correctos. Introduzca un número válido entre 1 y 100. `) }

[@carlesbautista8293]

Bien entendido Jonathan, Gracias por todo tu tiempo empleado!!!este curso es muy valioso.

[@undolarmas8766]

Gracias profesor !! lo admiro

[@jonmircha]

Hola, muchas gracias

[@joelventura76]

jhon excelente los cursos la verda estoy viendo cosas que no pense que tenia javascript pero tambien soy cincero me siento abrumado con todas estas propiedades que javascript :S es demasiadod informacion! pero excelente la verdad tratare de darle mas tiempo para entenderlo al 100% :S

[@jonmircha]

APrender JS duele :) pero con práctica todo fluye tarde o temprano, Ánimo :)

[@becamilo]

Me gustaría ver al profesor en Platzi. Enseña muy bien

[@jonmircha]

😮

[@GAST0N]

Jon, a pesar de que es una buena práctica escribir las constantes en mayúsculas, en un entorno real pasa a ser necesario hacerlo así?. Veo que tú no las escribes en mayúsculas y a mí me resulta más cómodo escribirlas en minúsculas también.

[@jonmircha]

😃👍🏻

[@miguelantonioescuderoperal7485]

Maestro buen tema, usare el proxy mas seguido :) se ve cool

[@cubanolibre5465]

Aviso de posible fallo en caso de como yo, usar un archivo javascript externo: Si se obtiene un error del tipo "Uncaught TypeError: 'set' on proxy: trap returned falsish for property Name" al usar proxy, prueba a cambiar tu HTML de a A mi me funciono, tal parece que hay problemas entre los type="module" y los proxys. Saludos... Este error salia incluso al pegar el codigo de Jon en mi js. No se cual sea la explicacion tecnica.

[@bralca5492]

En mi caso yo hice eso pero no me funcionó e.e Sin embargo, al borrar el "use strict"; pude solucionarlo.

[@jurrrgenOF]

buen video joven Mircha

[@jonmircha]

😉✌

[@Juicio87]

Me quise adelantar a la explicación de cómo hacer la validación y yo lo resolví así: (obj.hasOwnProperty(prop)) ?obj[prop] = valor :console.error(`La propiedad: "${prop}" no pertenece al objeto original`); Estoy aprendiendo un montón contigo! P.D: El proxy también copia métodos de los objetos!

[@jonmircha]

😉👍🏻

[@jaimealonsoprietopalomar6349]

Gracias. Utilicé esta alternativa y me funcionó, xq no sé que pasa que el método de validación del handler, no me funciona

[@dsc_dsc]

Cree un nuevo proxy y le llame `pedro`, luego le asigne valor a cada una de sus propiedades. La cosa es que al momento de crear este nuevo proxy y asignar los valores, al realizar un console.log, persona y jon pasan a tener los mismos valores que pedro. Los proxys no funcionan como las clases que de acuerdo a un "molde" (la clase en cuestión), se pueden instanciar infinitos objetos con diferentes valores, acá una vez que se crea un nuevo proxy y se le asignan valores, todos los otros proxys creados con el mismo objeto pasan a tener su mismo valor.

[@jonmircha]

👍🏻

[@MsRodrivas]

Me paso lo mismo, pense que el objeto persona funcionaba como un molde al cual no se modifaca al crear un proxy, so hay que tenerlo en cuenta que creando un proxy tambien estas modificando este objecto inicial persona.

[@Juicio87]

Porque no estás generando instancias, estás haciendo una copia del objeto persona y la característica de los proxys es que la copia hace que se modifique el objeto original; entiendo que la gracia de usar proxys es que al tener el manejador que hace de paso intermedio se puede validar lo que metes en el objeto. Creo que con el método assign() no se puede hacer esto

[@angieortizgiraldo9533]

Este Proxy me recuerda un poco al patrón Abstract Factory, puede ser?

[@cristianfernando2951]

Muy interesante, pero en que casos de uso puedo aplicar Proxies?

[@NickelFirepowerNico]

lo podes aplicar en formularios de texto, aquellos que requieren si o si de que estén escritos en letra o numero.

[@oscargb2898]

Durante 15 minutos buscando mi error y cuando me doy cuenta tenia: console.jon(jon) No se si reirme o llorar.

[@jonmircha]

jajajajaja

[@braianrico4422]

jajajaja Efecto de Jon 🧙‍♂️🧙‍♂️🧙‍♂️

[@timawid]

😂😂

[@diegorojas2066]

Tengo una pregunta Jon, ¿Es preferible crear la copia de un objeto usando los Proxies en vez de usar clases?, te agradecería que me enviaras tu comentario u opinión.

[@jonmircha]

Si quieres copiar un objeto usa Object.assign

[@diegorojas2066]

@@jonmircha gracias

[@jurrrgenOF]

Jon recomiendas algún libro para aprender JavaScript?

[@jonmircha]

La serie de You dont know JavaScript

[@facundogutierrez1132]

Porque al utizar el type = "module" de la etiqueta script en html, hace que el proxy no funcione en la consola? estuve buscando mucho cual era mi error, y un comentario decia sobre ese tema del module, y efectivamente borrandolo funcionaba en consola si sacamos el module.

[@jonmircha]

:O

[@lautaroasat3690]

Es cierto, jajaj estuve renegando como 1 hora

[@IsaacGarcia-qq8oq]

ya sabes como se soluciona el error sin quitar el module? :(

[@edwardosbertsantamariabeni2879]

@@IsaacGarcia-qq8oq solo debes de poner en la funcion set que retorne true y se soluciona

[@nerycaballeros3326]

Lo que no entiendo es por qué el objeto persona tomó los valores del objeto jon, que sucede cuando quiero crear otro objeto de tipo persona, no deberían estar estos valores asignados exclusivamente al objeto jon y el objeto persona estar vacío ?

[@devnull8813]

se podría decir que un proxy es un servicio de middleware????

[@jonmircha]

algo así

[@cod5745]

Una consulta, en mi caso a la hora de modificar los valores a las props, el valor modificado se reflejo automaticamente en la consola (antes de de escribir obj[prop] = value en el handler), es alguna actualizacion de ecma o algo asi?

[@jonmircha]

😮

[@IsaacGarcia-qq8oq]

segun hasta lo que pude ver en MDN el error de 'set' on proxy: trap returned falsish for property 'nombre' se debe al modo estricto que te pone JS al usar modulos :( como se tendria que usar entonces el set dentro de un handler si el modo estricto te arroja ese error? :( gracias¡

[@jonmircha]

👍🏻

[@IsaacGarcia-qq8oq]

@@jonmircha 👀👀

[@ArrobaPaz]

Hola! Quería preguntarle que es más conveniente para validar los atributos ... Los set o los proxies?

[@ArrobaPaz]

Ya encontre lo que buscaba www.freecodecamp.org/news/a-quick-intro-to-javascript-proxies-55695ddc4f98/ Gracias !

[@jonmircha]

Gracias por compartir

[@Antonio-qr1sp]

@@ArrobaPaz venia a preguntar lo mismo y esto me aclaro muchas cosas, gracias bro

[@eduardomegoguevara3181]

Hola mircha una consulta, porque cuando escribo return implicito en el error la propiedad twitter desaparece pero cuando no lo hago la propiedad twitter sigue estando igual imprimiendose en el console del proxy y el objeto persona¿?

[@jonmircha]

😮

[@eduardomegoguevara3181]

@@jonmircha si profe, es una duda que la sigo teniendo

[@bralca5492]

@@eduardomegoguevara3181 No se si hayas encontrado la respuesta pero creo que eso pasa porque al no colocar el return, solo estas mostrando en consola el error pero no lo estás "deteniendo" y es por eso que le podes asignar una nueva propiedad con un valor al proxy. En cambió al colocarlo, la ejecución de tu código se "corta" en el condicional. No se si se entendió Jajajajajaja

[@eduardorodriguez3266]

Tipo no capturadoError: 'set' en proxy: trap devolvió falsish para la propiedad 'nombre' en proxies.js:16

[@weslinmartinez1802]

Revisa bien tu codigo

[@eduardorodriguez3266]

@@weslinmartinez1802 ya lo resolví. Gracias!!

[@juanis11a]

@@eduardorodriguez3266 como lo resolviste tengo el mismo problema

[@percycordova1994]

borra el 'use strict' ami me salia ese error, borre esa linea de codigo y funco

[@heimancastro1954]

😄😄😄😄😄

[@jonmircha]

😉👍🏻

[@davidcardenas7737]

profe donde podemos encontrar el curso de nodejs el ultimo que usted dicto

[@isrraelmendozasuarez9687]

kzbin.info/www/bejne/l4iphopqiKl3atE

[@alexanderperezbernal5281]

existen otras trampas aparte del GET que parten del objeto Reflect.. getPrototypeOf() setPrototypeOf() isExtensible() preventExtensions() getOwnPropertyDescriptor() ownKeys() has() get() set() deleteProperty() apply() construct()

[@jonmircha]

👍🏻

[@emirtirso842]

al poner "emir.nombre="emir"; " la consola me manda un error, por que? este es el error: 30.js:14 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'nombre' at 30.js:14 y este mi codigo const persona = { nombre: "", apellido: "", edad: 0 } const manejador = { set(obj, prop, valor){ } } const emir = new Proxy(persona, manejador); emir.nombre="emir"; console.log(emir); pero antes de poner "emir.nombre="emir"; " el codigo funcionaba tal cual como en el video, minuto 5

[@jonmircha]

Ponlo en un codepen

[@emirtirso842]

@@jonmircha descuide, ya vi que era el html que tenia tipo module y otro script, eran de clases anteriores.

[@MrCibershok]

Hola John buena tarde, gracias primeramente por tan maravilloso aporte. Desde que inicie tu curso de Javascrip tengo un problema y no lo he podido solucionar, es a la hora de utilizar el signo de igualdad estricta (creo que se llama así) ===. Siempre como tu dices a veces me desconchinfla todo. const persona = { nombre: "", apellido: "", edad: 0 } const manejador = { set(obj, prop, valor){ if(Object.keys(obj).indexOf(prop) === -1){ return console.error(`La propiedad "${prop}" no existe en el objeto persona.`); } if((prop === 'nombres' || prop === 'apellidos') && !(/^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$/g.test(valor)) ){ }{ return console.error(`La propiedad "${prop}" solo acepta letras y espacios en blanco.`); } obj [prop] = valor; } } const ivan = new Proxy(persona, manejador); ivan.nombre = "Ivan"; ivan.apellido = "Castro"; ivan.twitter = "@mestra"; ivan.edad = 40; console.log(ivan); console.log(persona); Este es el código de este video y me saca este error en consola: proxis.html:26 La propiedad "nombre" solo acepta letras y espacios en blanco. set @ proxis.html:26 (anonymous) @ proxis.html:33 proxis.html:26 La propiedad "apellido" solo acepta letras y espacios en blanco. set @ proxis.html:26 (anonymous) @ proxis.html:34 proxis.html:19 La propiedad "twitter" no existe en el objeto persona. set @ proxis.html:19 (anonymous) @ proxis.html:35 proxis.html:26 La propiedad "edad" solo acepta letras y espacios en blanco. set @ proxis.html:26 (anonymous) @ proxis.html:36 proxis.html:38 Proxy {nombre: "", apellido: "", edad: 0} proxis.html:39 {nombre: "", apellido: "", edad: 0} No se que hacer ya que siempre me pasa al usar el ===.

[@jonmircha]

🤔 mejor sube tu código a un codepen así ni como ayudarte

[@MrCibershok]

@@jonmircha Segui tu recomendación y este es el enlace: codepen.io/Mestra_18/pen/RwogegB?editors=1111

[@christianosorio9239]

Hola! En tú codigo veo que tienes llaves repetidas: if((prop === 'nombres' || prop === 'apellidos') && !(/^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$/g.test(valor)) ){ //El return debe ir acá }{ //Está llave está demás return console.error(`La propiedad "${prop}" solo acepta letras y espacios en blanco.`); }

[@christianosorio9239]

Estoy con tu codigo en mi editor y todo esta ok. No me salta el error que comentas

[@MrCibershok]

@@christianosorio9239 ahí está el detalle mi amigo, me saca error y no sé por qué razón

[@AngelAMartinezA]

Hola Jhon, espero que estés bien... estoy haciendo este ejercicio, pero la verdad la validación de (Object.keys(obj).indexOf(prop) === -1) no me la hace, me muestra el mensaje... pero al proxy, como al objeto me sigue asignando la propiedad a pesar de que no estén declaradas, no se que pueda estar pasando, en google chrome me las muestra, probé con mozilla firefox me da un resultado distinto, en el proxy si se cumple la validacion, pero en el objeto no.... que puede estar pasando?

[@jonmircha]

🤔 ni idea subelo a un codepen o un github

[@diegoforti23]

@@AngelAMartinezA Creo que te estás olvidando el return en la linea 10 entonces no corta y corre el obj[prop] = valor.

[@alfredomontes1111]

hola profe y a todos estoy tratando de hacer la validacion de la edad pero no me funciona if ((prop === "edad") && !(/^[0-9]+$/.test(Value))){ return console.error(`la propiedad ${prop} solo acepta numeros`); } este es el codigo si hay algo malo por favor decirme

[@matiasromera330]

el parámetro que le pasas es Value o value? ahí puede estar el error

[@alfredomontes1111]

@@matiasromera330 si eso era gracias 😅

[@__.bastiann_]

@@matiasromera330 Buena tarde, ¿Cómo podría hacer además de eso que sólo me reciba número y No un número en cadena de texto?

[@braianrico4422]

🧙‍♂️🧙‍♂️🧙‍♂️

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@manolais]

no sería más facil hacer if (!obj[prop]) { return console.error('propiedad no existe') }

[@emersonperalesvillanueva8568]

ta interesante el proxy xd

[@jonmircha]

;)

[@hernansanabria9685]

sept 11 1969**Oct 20 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

👋🏻😉

[@nachosanabria6942]

gracias excelente video

[@jonmircha]

Gracias a ti