Proxy

Apuntes de la clase:

Yoshua Díaz

Sé que no es una aplicación muy ortodoxa pero la comparto:

const dialogosRamirez = {
        accion: "Para saber si es cocaina enviaremos una muestra al laboratorio",
        sugerencia: "¿Seguro no quiere esperar a los analisis de laboratorio?",
        pregunta: "¿Y supo si era o no cocaina?"
      }

      const dialogosComandante = {
        get(obj, prop) {
          switch (prop) {
            case "accion":
            console.log(obj[prop])  
            console.log("Que muestra ramirez que muestra?")
              break
            case "sugerencia":
            console.log(obj[prop])  
            console.log("Ahorita vemos que onda... ahorita vemos que pe...")
              break
            case "pregunta":
            console.log(obj[prop])  
            console.log("Nel... no es coca... es harina... ay papaya de celayaaaa, ay papantla tus hijos vuelan!!! VAMONOS PE...!!!")
              break
            default:
              console.log("Que se armen los p$%·% ch%&/zos!!! PUM!!!!")
              break
          }

          return obj[prop]
        }
      }

      const oficialRamirez = new Proxy(dialogosRamirez, dialogosComandante);

Esaú Maximino

Les dejo el codigo que usaremos en clase:

<html>
  <head>
    <title>Proxy</title>
  </head>

  <body>
    <a href="/ejercicios/">Go back</a>
    <p><em>Abre la consola</em></p>

    <script src="https://unpkg.com/[email protected]/levenshtein.js"></script>
    <script>
      // Proxy es parecido a getters y setters
      // Usa un concepto que se llama traps: son interceptores de llamadas. A diferencia de getters, no opera sobre una propieda, si no sobre un objeto.
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Methods_of_the_handler_object

      // Creemos un ejemplo donde interceptamos llamadas para leer una propiedad
      // Si la propiedad existe, la regresamos
      // Si no existe, entonces sugerimos una que pueda funcionar

      // Para eso eso vamos a usar un algoritmo que se llama Levenshtein. (window.Levenshtein.get)
      // Ejemplos de levenshtein distance (usa window.Levenshtein)

    </script>
  </body>
</html>

cesar88

me sirvio mucho para reforzar y entender mejor el concepto:
https://www.youtube.com/watch?v=0o4-TvTkGtk

Diego Sebastián

Les dejo el link de levenshtein: https://unpkg.com/[email protected]/levenshtein.js

Cesar Augusto Barco de Gouveia

Ir a la navegación Ir a la búsqueda

Proxy

El objeto Proxy se usa para definir un comportamiento personalizado para operaciones fundamentales (por ejemplo, para observar propiedades, cuando se asignan, enumeración, invocación de funciones, etc).

Métodos del objeto handlerSección

El objeto controlador es un objeto marcador de posición que contiene trampas para Proxy.

Todas las trampas son opcionales. Si no se ha definido una trampa, el comportamiento predeterminado es reenviar la operación al objetivo.

handler.get()

Una trampa para obtener valores de propiedad.

SintaxisSección

var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

Los siguientes parámetros se pasan al getmétodo. thisestá vinculado al controlador.

target

El objeto de destino.

property

El nombre o Symbol de la propiedad a obtener.

receiver

El proxy o un objeto que hereda del proxy.

El getmétodo puede devolver cualquier valor.

Ejemplo

const monster1 = {
  secret: 'easily scared',
  eyeCount: 4
};

const handler1 = {
  get: function(target, prop, receiver) {
    if (prop === 'secret') {
      return `${target.secret.substr(0, 4)} ... shhhh!`;
    } else {
      return Reflect.get(...arguments);
    }
  }
};

const proxy1 = new Proxy(monster1, handler1);

console.log(proxy1.eyeCount);
// expected output: 4

console.log(proxy1.secret);
// expected output: "easi ... shhhh!"

Object.keys()

El método Object.keys() devuelve un array de las propiedades names de un objeto, en el mismo orden como se obtienen en un loop normal.

Object.keys devuelve un array cuyos elementos son strings correspondientes a las propiedades enumerables que se encuentran directamente en el object. El orden de las propiedades es el mismo que se proporciona al iterar manualmente sobre las propiedades del objeto.

Array.prototype.find()

El método **find()** devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. En cualquier otro caso se devuelve undefined.

Distancia de Levenshtein

La distancia de Levenshtein, distancia de edición o distancia entre palabras es el número mínimo de operaciones requeridas para transformar una cadena de caracteres en otra, se usa ampliamente en teoría de la información y ciencias de la computación. Se entiende por operación, bien una inserción, eliminación o la sustitución de un carácter. Esta distancia recibe ese nombre en honor al científico ruso Vladimir Levenshtein, quien se ocupó de esta distancia en 1965. Es útil en programas que determinan cuán similares son dos cadenas de caracteres, como es el caso de los correctores ortográficos.

zeqelandia

casi

Jesús Miguel Quinto Teran

https://es.wikipedia.org/wiki/Distancia_de_Levenshtein
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Proxy

Otra gran utilidad de los Proxy son la validación de datos, podemos usarlos como piezas intermedias para controlar ingeniosamente las posibles entradas del usuario.

gonzaloPzl

Cuando escriben una arrow function no hace falta hacer el return si solo se va a ejecutar una linea de codigo, basta con sacarle los corchetes y ponerlo en la misma linea.

const suggestion = Object.keys(obj).find(key => Levenshtein.get(key, prop) <= 3)

Alejandro González Reyes

Dejo un apunte mas detallado acerca del ejemplo visto en clase

// target es mi objeto a supervisar (sus propiedades pueden ser objetos, array, funciones, u otro proxy)
        const target = {
            red: 'Rojo',
            blue: 'Azul',
            green: 'Verde'
        }
        // handler es un objeto con funciones (trampa) que definen las acciones a seguir cuando se accede al objeto supervisado
        const handler = {
            // get es una función que recibe el objeto supervisado y la propiedad a la que se quiere acceder
            get(objeto, propiedad) {
                if (propiedad in objeto) {
                    // si la propiedad existe, pues retornamos su valor
                    return objeto[propiedad]
                }

                // Si llega hasta aqui, significa que la propiedad invocada sobre el objeto no existe, por tanto, vamos a ver si podemos retornar una sugerencia
                const sugerencia = Object.keys(objeto).find(key => {
                    // creo un objeto con todas mis claves del objeto supervisado, y retorno aquella (nombre) que su distancia sea <= 3 tomando como base la propiedad invocada
                    return Levenshtein.get(key, propiedad) <= 3
                })

                if (sugerencia) {
                    console.log(`${propiedad} no se encontró, Quizá tu querías decir ${sugerencia}`)
                }

                // RETORNAMOS EL VALOR DE LA PROPIEDAD INEXISTENTE (por buenas prácticas)
                return objeto[propiedad]
            }
        }


        // 1. Proxy() es un constructor (que siempre debe utilizarse con new) que recibe dos parámetros:
                // targer: un objeto sobre el cual se producirá la supervisión
                // handler: un objeto con una serie de manejadores para cada una de las diferentes operaciones que se realizarán sobre el objeto pasado en el primer parámetro
        // 2. Este constructor devuelve el objeto pasado como parámetro, pero que está siendo interceptado. Es importante tener en cuenta que Proxy() no copia el objeto, devuelve el mismo objeto, pero supervisado.
        const p = new Proxy(target, handler)


        console.log(p.red)
        console.log(p.res)

Carlos García

Los proxys es una herramienta muy potente. Lástima que nos quedemos solo en una introducción. Os paso un enlace de un blog con apuntes de JS https://www.todojs.com/introduccion-a-proxy-de-es6/

Laura Camila Pregonero

Buena Clase!!
El Proxy es servidor que hace como intermediario en las peticiones de recursos que realiza un cliente a otro servidor!

Levenshtein= Es un algoritmo que va a encontrar la distancia entre dos cadenas!!!

Brian Sánchez Izquierdo

La neta siempre me había preguntado como lograba git o npm hacer sugerencias cuando erraba un comando, increíble los Proxys. Aquí mi definición:
** Los Proxys nos permiten interceptar llamadas a las propiedades de objetos para evaluar si estan siendo correctamente referenciadas**

Franco Coloccini

Si bien la temática importante de la clase no es la sugerencia en sí sino el uso de Proxy, encontré un inconveniente en el código que genera dicha sugerencia.
Solo devuelve la primer propiedad que cumple con la distancia Levenshtein, lo que implica que dependiendo el orden que tengan dentro de target es la sugerencia que ofrecerá, ignorando si es que hay más opciones que cumplen con la condición.
Hice una variante del ejemplo para que se sugieran todas las propiedades que cumplan con la distancia Levenshtein requerida.

const target = {
  green: 'Verde',
  red: 'Rojo',
  blue: 'Azul',
}

const handler = {
  get(obj, prop) {
    if (prop in obj) {
      return obj[prop]
    }
    const suggestions = []
    for (const key in obj) {
      if (Levenshtein.get(key, prop) <= 3) {
        suggestions.push(key)
      }
    }
    if (suggestions.length) {
      console.log(
        `${prop} no se encuentra. Quisiste decir alguna de las siguientes opciones?`
      )
      suggestions.forEach((suggestion) => {
        console.log(suggestion)
      })
    } else {
      console.log(
        `${prop} no se encuentra y no tengo sugerencias para ofrecer.`
      )
    }
    return obj[prop]
  },
}

const p = new Proxy(target, handler)

Douglas Vásquez

Alguien sabe por qué retorna obj[prop] y no obj.prop? Por qué lo escribe así? yo entiendo que obj es el objeto target y prop es la propiedad que se busca. Entonces, para buscar una propiedad dentro de un objeto acaso no se escribe “obj.prop”?

Jesus Federico David Herrera

Proxy usando set, un ejemplo donde se controla que la propiedad edad de una persona sea mayor a 18 años.

const objPersona = {
        nombre:'Federico',
        apellido:'Herrera',
        edad:0
      }

      const handler = {
        set(obj,prop,value){
          if(prop === 'edad' && value < 18){
            return console.log(`La persona debe ser mayor de edad`)
          }else{
            return obj.prop = value;
          }
        }
      }

      const proxyPersona = new Proxy(objPersona,handler2)
      proxyPersona.edad =15;
      proxyPersona.edad=20;```

Andres Felipe Valencia Benitez

Hola! comparto una implementación para el método Set:

<script>
      const target = {
        red: "rojo",
        green: "verde",
        blue: "azul"
      };

      const handler = {
        get: function(obj, prop) {
          if (prop in obj) {
            return obj[prop];
          }

          const suggestion = Object.keys(obj).find(
            key => Levenshtein.get(key, prop) <= 3
          );

          if (suggestion) {
            console.log(
              `${prop} no se encontró. Quisiste decir ${suggestion}`
            );
          }

          return obj[prop];
        },
        set: function(obj, prop, value) {
          if (prop === "black") {
            if (value === "negro") {
              obj[prop] = value;
            } else {
              console.log(
                `${prop} no puede tener el valor "${value}" tiene que ser "negro"`
              );
            }
          }
        }
      };

      const p = new Proxy(target, handler);
    </script>

Andres-lh

Como complemento a la clase, en javascript existe un objeto llamado “Reflect” el cual simplifica la creación de un proxy.
Un ejemplo sencillo seria:

let user = {};

Reflect.set(user, 'name', 'John');

alert(user.name); // John

En el siguiente enlace pueden encontrar más información sobre proxy y reflect: https://javascript.info/proxy

Jose Anibal Garcia Giraldo

Les comparto mi ejercicio 😊, también le agregué el handler set

Nicolás Posa

<script src="https://unpkg.com/[email protected]/levenshtein.js"></script>```

José Iván Sandoya

Si desean complementar 🤓
https://www.youtube.com/watch?v=gZ4MCb2nlfQ

Ariel Sharpe

El algoritmo de Levenshtein es algo parecido al de hamming para secuencias de ADN y ARN

Diego Dorado

muy interesante, espero luego ver ese proxy en accion en un proyecto pq sino se borrara de mi mente

Sebastián Buitrago

en la linea 36

Levenshtein.get(key, prop) <= 3

si quieren que les cambie a ese signo del profesor deben usar la font “fira code” en vsc y tambien podran ver la flecha al escribir la arrow function

para mas info https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions

Salaxer

Entre mas aprendo mas emocionado estoy.

Santiago Valencia Valencia

![](

compañ[email protected] aun no se porque me aparece este error, me dice que levenshtein no esta definido de pronto tendré algún tema con el src ??

carlosbazanhuaman

ahora entiendo como funcionan y se aplican estos algoritmos en los programas del día a día.

Maria Elizabeth Minero Alvarenga

Una trampa para obtener valores de propiedad!
Interesante.

Karen Paola Diaz Duarte

Súper mega interesante. Gracias!!

nicolasAltieri

Muy buena clase!!! Soundex está muy bueno, compara la similitud de “como suenan” las palabras!!!

Javier Armando Vargas Vega

Un tema muy interesante y útil de JavaScript. Veo que su mayor utilidad sería en la creación de APIS.
Estoy en lo cierto??

Cristian Caraballo

hola, alguien sabe que fuente usa richard en VsCode?

Diego Camino

Alguien me puede decir como se llama la librería que usa o plugin para vs code para escribir <= junto? o como lo hace?

Jose Daniel Molina

Jaja, me estaba confundiendo con el metodo find(), este devuelve el valor del array que cumpla cierta condicion… Creo que apartir de hoy no se me olvida 😄

Me gusta mucho esto de los Proxy, me da muchas ideas para implementarlo. Ahora hay que aprender mas acerca de él.

Comparto los apuntes de la clase.

/* Trabajando con Proxy, es una clase. Por lo que hay que instanciarlo
  recibe dos parametros:
  target --> Es el objeto a interceptar.
  handler --> Son las "trampas" o la funcion que se ejecuta cuando se intercepte
  el target
*/

const target = {
  red: 'Rojo',
  green: 'Verde',
  blue: 'Azul'
}

const handler = {
  get(obj, prop){
    // Comprobar que la propiedad se encuentre en el objeto
    if(prop in obj){
      return obj[prop]
    }

    // Mirar cual es la key que el usuario estaba buscando
    // Fin devuelve el valor del array que cumple cierta condicion
    const sugerencia = Object.keys(obj).find(key => {
      return Levenshtein.get(key, prop) <= 3;
    })

    // Un string con contenido se evalua a true
    if(sugerencia){
      console.log(`${prop} no se encontró. Quisiste decir ${sugerencia}?`);
    }

    // Una funcion debe devolver un valor que no sea undefined, la mayoria de las veces
    return obj[prop];
  }
}

const p = new Proxy(target, handler);```

Pedro Julian Leguizamon Miers

Cambie un poco el codigo del ejemplo para que diera mas de una sugerencia, con esto si tenes colores como “blueHard” dara mas de una sugerencia

const target = {
        red: 'Rojo',
        green: 'verde',
        blue: 'Azul',
        blueHard: 'Azul Fuerte'
      }
      const handler = {
        get(obj, prop) {
          if (prop in obj){ return obj[prop]}
          const suggestions_list = [];
          const suggestions = Object.keys(obj).map(key=>{
             let sdist = Levenshtein.get(key, prop);
             if (sdist <= 3) {
               suggestions_list.push(key)
             }
          });
          if (suggestions_list.length > 0) {
            console.log(`No conozco el valo ${prop}, tal vez te referiste a alguno de estos`);
            console.table(suggestions_list);
          }
          return obj[prop];
        }
      }
      const proxy = new Proxy(target, handler);```

Juan Jativa

hace 3 meses

Que lastima que el aporte más votado sean apuntes para entender lo que el profe está haciendo y que la fuente de sus apuntes sean tambien clases de Youtube, esto dice mucho de lo dificil de entender al profe y que hay que buscar fuentes externas porque quedan muchos huecos. Ojala salga una version más didactica de este curso porque voy a menos de la mitad de todo el curso y siento que me quedan mas dudas que aprendizajes

Lucas Alejandro Moreno Olivos

alguien sabe en que contexto se puede utilizar proxys? no se me ocurre alguno 😕

Irving Juárez

hace 6 meses

Me gusto el ejercicio pero creo que seria mejor que usaramos un filter en vez de un find, ya que puede que haya mas de un match. Y el find solo retorna un valor, mientras que el filter retorna un array

const target = {
      red: "Rojo",
      reda: "Reda",
      blue: "Azul",
      green: "Verde"
};

const handler = {
  get(obj, prop) {
    if (obj[prop]) {
      return obj[prop];
    }

     const suggestion = Object.keys(obj).filter(
       (item) => Levenshtein.get(prop, item) < 3
     );

      if (suggestion.length > 0) {
          console.log(`Did you mean ${suggestion} ?`);
      }
  }
};

const p = new Proxy(target, handler);

Kevin Figuera

hace 5 meses

const  target = {
        red: 'Rojo',
        green: 'Verde',
        blue: 'Azul'
    }
    const handler = {
        get(obj,prop){
            if(prop in obj){
                return obj[prop];
            }
            const  suggestion = Object.keys(obj).find(key => {
                return Levenshtein.get(key,prop) <= 3
            })
            if (suggestion){
                console.log(`${prop} no se encontro, Quisiste decir ${suggestion}?`)
            }
            return obj[prop];
        }
    }
    const p = new Proxy(target, handler)

Gabriel Hernández Valdez

hace 10 meses

Hola compañeros, vi este video para poder complementar unas dudas que me quedaron de la clase 😄 https://www.youtube.com/watch?v=7njrLMJgDtQ

Javier Fuentes Mora

Profe Platzi

No entiendo porque el proxy lo declara así , si la documentación le manda tres elementos y entiendo que incluso la forma en que el la declara dice que no es correcta , alguien que me de más luz?

Julian Carelli

Hice lo mismo que Richard solamente que le agrega comandos que quisiera agregar en mi terminal xd

Jose Barboza

const persona2 = {
    name: "",
    lastname: "",
    age: 0
}

const handler2 = {
    set (obj, prop, value){
        if(Object.keys(obj).indexOf(prop)===-1){
            return console.error(`la propiedad ${prop} no existe`)
        }
        obj[prop] = value
    }
};

const proxy2 = new Proxy(persona2, handler2); 
proxy2.name = "jose"
proxy2.lastname = "barboza"
proxy2.twitter = "@barbozagonza" //..no existe en persona2, veremos el work del handler
proxy2.age = 0

console.log(proxy2)

wilantury

Veamos si entendí: El proxy actúa sobre la estructura de datos “objeto” en JavaScript. hay varias trampas según la operación que queramos hacer sobre el objeto target.

GET: intercepta la operación de obtener un elemento del objeto con su llave. allí podemos hacer algunas validaciones.
SET: intercepta la operación de agregar un nuevo elemento al objeto, podemos hacer validaciones antes de asignar el nuevo valor.

Sergio Perez

Todo claro, exceptuando el porqué retorna obj[prop]. Alguien me puede ayudar?

GARCIA CAMARENA EZEQUIEL

El objeto Proxy se usa para definir un comportamiento personalizado para operaciones fundamentales (por ejemplo, para observar propiedades, cuando se asignan, enumeración, invocación de funciones, etc).
Métodos del objeto handlerSección
El objeto controlador es un objeto marcador de posición que contiene trampas para Proxy.
Todas las trampas son opcionales. Si no se ha definido una trampa, el comportamiento predeterminado es reenviar la operación al objetivo.
handler.get()
Una trampa para obtener valores de propiedad.

Javier Andres Gamboa Duarte

muy bueno

T-gold

ALGUIEN TIENE ALGUNA TRAP DE PROXY aparte de get
que quiera compartir?

Jean Carlos Nuñez Hernandez

Levenshtein distance este es una buena tecnica

Juancarlos Salcedo Terán

no es libreria es Biblioteca

Wilson Fabian Pérez Sucuzhañay

esto se podría utilizar como un paso ejemplo para saber si el usuario tiene permiso de hacer un get del objeto no ?

Sergui20

Este curso está mágico !

Bryson Steven Mosquera Florez

En qué momento es recomendable usar los Proxy??

Jorge Dimitrios Gianareas Tsimogianis

El proxy sirve para interceptar la lectura de propiedades de un objeto (los get, y set) entre muchas otras funciones. Así, antes de que la llamada llegue al objeto podemos manipularla con una lógica que nosotros definamos.

T-gold

comparto un PROXY --SET muy interesante

let validator = {
set: function(obj, prop, value) {
if (prop === ‘age’) {
if (!Number.isInteger(value)) {
throw new TypeError(‘The age is not an integer’);
}
if (value > 200) {
throw new RangeError(‘The age seems invalid’);
}
}

// The default behavior to store the value
obj[prop] = value;

}
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = ‘young’; // Throws an exception
person.age = 300; // Throws an exception

Germán Moreno

Excelente clase. Hay muchas situaciones prácticas en las que poder utilizar los Proxy, así que es una genial herramienta.

Maximo Martinez Soria

A alguien se le ocurre algún ejemplo de un caso más real?

Emanuel Catriquil

Super útil para una mejor interacción con el usuario!

Ricardo Martínez Murillo

Me pareció muy interesante esta clase

Freddy Barrios

Proxy… nueva clase por explorar!

Alessandri Fonseca

Creo que esto sera muy útil a la hora de realizar buscadores, podríamos implementarlo en platzi vídeo

Edmundo Salamanca Villa

Que increible!

Andres Moreno

Muy util este concepto de proxy, aunque un poco complicado de entender sobretodo si se desea utilizar un array como target.
Para esto, les comparto este articulo para reforzar un poco este concepto
how to use proxies

Jhon Carlos Colorado Angulo

Increible los proxy en JS.

David Rodriguez

Wow,Que interesante ! 😮

Jonathan Lopez Ruiz

Excelente explicación, me gusto mucho esta clase.

Ludwing Juan Homero Pérez Tzaquitzal

Un video para ampliar un poco sobre el tema: Proxy en javascript

José María Cuevas Ramírez

Desconocía por completo este concepto 😮

Juan Teixeira

OMG…

Fernando Cordero

Estoy flippando jajaja

Francisco Garcia [C6]

😄

Luis Ruiz Ramos

Qué cool es proxy.

Beto Martinez

Woooow

Angelo Gabriel Benavidez Chuquilla

Excelente explicación !

Jorge Méndez Ortega

esto de los proxys esta genial, esta es como la tercera vez que veo este tema ya que literal quiero bajarlo al 100

lmoran

Para roforzar un poco acerca de Proxy:
enlace

Iván Barrientos Salas

Me marca un error, Levenshtein no esta definido

Lautaro Landin

Esto debe ser util para los motores de búsqueda también. O por lo menos me lo imagino así en principio

Luis Gerardo Lopez Perez

Wow!, se me ocurren muchas situaciones donde pude haber implementado los proxys, a partir de ahora todos mis proyectos tendrán suggestions xD

Andrés Felipe Eslava Zuluaga

Un objeto proxy envuelve otro objeto e intercepta operaciones, como propiedades de lectura / escritura y otras, opcionalmente manejándolas por sí solo, o permitiendo que el objeto las maneje.
·
Los proxies se usan en muchas bibliotecas y algunos marcos de navegador. Veremos muchas aplicaciones prácticas en este artículo.

· Target ─ Es un objeto para envolver, puede ser cualquier cosa, incluidas las funciones.
· Handlers ─ Configuración de proxy: un objeto con “trampas” (métodos que interceptan operaciones) que definen el comportamiento.

p.e: 
_get (traer)_ "la trampa" para leer una propiedad de target
_set (setear)_ "la trampa" para escribir una propiedad en target, y así sucesivamente.

Marcos Orozco Rios

https://www.youtube.com/watch?v=0o4-TvTkGtk

Complementando un video de proxy

juan david jaramillo zuñiga

proxy recibe un target y un handler. El handler es un objeto que contiene funciones 'trap'. Aqui podremos hacer lógicas antes de mostrarle el resultado al usuario.

rigiba

estannueva caracteristica es bien interesante

fernandojerez

Como tio ben diria usa Proxy con responsabilidad. Porque esto es una capa dinámica sobre otra capa dinámica

Paul Cortes

Genial forma de crear las ayudas

Nelson Antonio Sánchez Urrutia

Me pregunté cual era la diferencia de usar “in” y "hasOwnProperty"
y encontre esto post

enriquerabelltalamantes

Proxy en español apoderado es un objeto en JS que nos ayuda a vigilar las operaciones que se hagan con el target.
El target es otro objeto o variable que le indiquemos
La manera en las que los va a vigilar es con el handler que es un objeto con las trampas que queremos poner
Las trampas son el lugar en el que se va a verificar , por ejemplo el get es una trampa cuando se obtiene el valor y el set cuando se asigna, dentro de estas trampas haremos la lógica a vigilar o manejar.
Se genera con la palabra reservada de las trampas por ejemplo get(objeto, atributo){}, los parámetros que reciben dependen del tipo de trampa. Estas trampas pertenecen al objeto handler
Aquí la documentación de este objeto: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler

HeyItsMe

Buna clase!

Sebastián Buitrago

script inicial

<html>
<head>
	<title>Proxy</title>
</head>
<body>
	<a href="/ejercicios/">Go back</a>	
	<p><em>Abre la consola</em></p>
	<script src="https://unpkg.com/[email protected]/levenshtein.js"></script>
	<script>
		// Proxy es parecido a getters y setters
  	// Usa un concepto que se llama traps: son interceptores de llamadas. A diferencia de getters, no opera sobre una propieda, si no sobre un objeto.
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Methods_of_the_handler_object

    // Creemos un ejemplo donde interceptamos llamadas para leer una propiedad
    // Si la propiedad existe, la regresamos
    // Si no existe, entonces sugerimos una que pueda funcionar

    // Para eso eso vamos a usar un algoritmo que se llama Levenshtein. (window.Levenshtein.get)
    // Ejemplos de levenshtein distance (usa window.Levenshtein)
	</script>
</body>

Joseph Manuel Salen Pantoja

Si el valor no se encuentra en el objeto, vamos a retornar un numero 37:

const handler = {
  get: function(obj, prop) {
		// return: Se encuentra esa propiedad en los objetos?
    return prop in obj ?
			// Si... esta es la propiedad
      obj[prop] :
			// No... 37!
      37;
  }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);
//  1, undefined

console.log('c' in p, p.c);
//  false, 37

Fuente

Francisco Javier Ali Cruz Aguila

Para los que no saben que onda con el src que utiliza el prof. sparragus para Levenshtein les dejo este link.
https://unpkg.com/

Básicamente, con UNPKG nos evitamos tener que instalar una librería a través de NPM.

En su documentación explica fácilmente como usar UNPKG.

Básicamente es usar la siguiente sintaxis en tu src.

https://unpkg.com/:package@:version/:file

En este caso:

https://unpkg.com/fast-levenshtein@2.0.6/levenshtein.js

Espero les sirva para agilizar su proceso y entender que hay detrás del link que utiliza el profe en la clase.

Jose Salvador

No use Levenshtein distance, en su lugar cree una funcion muy simple y basica que regresa un numero que representa el nivel de parcido de dos cadenas de caracteres.
En fin, no importa, la clase trata del uso de Proxy.
Aqui mi humilde codigo.
Js Proxy Example

Jesus Adrian Berrio Valdes

<h3>Proxies</h3> <h4>Apuntes adiciones</h4>

const empleador = {
nombre: "luis" };

console.log(nombre in persona) // TRUE
//¿existe la propiedad nombre en el objeto persona?

console.log(toString in persona.nombre) // TRUE
// también podemos usar "toString" para preguntar si hay una línea de texto

object.key

const empleados = {
    nombre: "Luis",
    edad: "20",
};
console.log(empleador.key) // [nombre, edad]
// devuelve un array con los key del arreglo

.find

const num = [10, 15, 0, 8]
num.find(numero => numero == 0) //devolvera solamente los numeros iguales a 0, 
// una vez lo encuentre se detendrá

ahora sí

<h3>Proxy</h3>

Para crear un proxy usamos new Proxy(objetos, handle) donde objeto va a ser lo que vamos a interrumpir y handle que va a hacer con los valores

Handle es la lógica del proxy, que debo hacer con esto que intercepte, en sí handle tiene varias funciones que nos ayudan aquí usaremos get Que no es lo mismo que getter

const handler = {
    get(target, property){ // le pasamos un objetivo a inspecionar y la propiedad que
// debe inspeccionar, el objetivo el arrgelo la propidad el nombre
        if(property in target){ // si esta propiedad existe dentro del target
            return target[property] // no hagas nada
        }
        const sugerencia = Object.keys(target) // si no traeme las key del target
        sugerencia.find(key => key.Levenshtime =< 3) // y dentro de sus key vas a buscar
				// un elemento muy parecido 
    } if(sugerencia) {
			console.log(`no quisuste decir ${sugerencia} ?` 
}

Otras trampas para handle 🥅

Jesus Adrian Berrio Valdes

Getter y setters

Supongamos que creamos una arreglo y dentro tiene una función que devuelve 2 valores el nombre y apellido

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  fullName: function (){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName())

Pero esta no es la forma correcta ya que gette y setter mantiene la semantica es mucho màs transparente y mantiene mejor la integridad de la data

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  get fullName(){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName)

Se llama como si fuera un objeto mas

Los setter en vez de sacar datos del arreglo estos reciben datos y los ponen dentro del mismo

let persona = {
  nombre: 'Yeison',
  apellido: 'Daza',
  get nombreCompleto() {
    return `${nombre} ${apellido}`
  },
  set nombreCompleto(nom) {
    const palabras = nom.split(' '); // Dividimos el string en 2
    this.nombre = palabras[0] || ''; //agarra el valor 0
    this.apellido = palabras[1] || ''; // agarra el valor 1
  }
}

persona.nombreCompleto = 'Camilo Sanchez' // apesar que es una función esta no se 
// llama como una ya que dirá que no esta definida

console.log(persona.nombre); //camilo
console.log(persona.apellido); //sanchez

Setter no puede tener mas de un parámetro

<h3>Proxies</h3> <h4>Apuntes adiciones</h4>

const empleador = {
nombre: "luis" };

console.log(nombre in persona) // TRUE
//¿existe la propiedad nombre en el objeto persona?

console.log(toString in persona.nombre) // TRUE
// también podemos usar "toString" para preguntar si hay una línea de texto

object.key

const empleados = {
    nombre: "Luis",
    edad: "20",
};
console.log(empleador.key) // [nombre, edad]
// devuelve un array con los key del arreglo

.find

const num = [10, 15, 0, 8]
num.find(numero => numero == 0) //devolvera solamente los numeros iguales a 0, 
// una vez lo encuentre se detendrá

ahora sí

<h3>Proxy</h3>

Para crear un proxy usamos new Proxy(objetos, handle) donde objeto va a ser lo que vamos a interrumpir y handle que va a hacer con los valores

Handle es la lógica del proxy, que debo hacer con esto que intercepte, en sí handle tiene varias funciones que nos ayudan aquí usaremos get Que no es lo mismo que getter

const handler = {
    get(target, property){ // le pasamos un objetivo a inspecionar y la propiedad que
// debe inspeccionar, el objetivo el arrgelo la propidad el nombre
        if(property in target){ // si esta propiedad existe dentro del target
            return target[property] // no hagas nada
        }
        const sugerencia = Object.keys(target) // si no traeme las key del target
        sugerencia.find(key => key.Levenshtime =< 3) // y dentro de sus key vas a buscar
				// un elemento muy parecido 
    } if(sugerencia) {
			console.log(`no quisuste decir ${sugerencia} ?` 
}

Otras trampas para handle 🥅

Wilmer Jesús Cuevas Perdomo

Chicos, les regalo este pequeño ejemplo donde uso un proxy en una función en lugar de un objeto. Es una funcion de suma y utilizo la Trap apply() para detectar cuando se llama a la función y valido que los parametros sean solo dos y ademas sean numericos:

    const suma = (num1, num2)=>{

        return num1 + num2;

    }

    const handlerSuma = {

        apply(target,thisArg,argumentsList){

            console.log("llamaste a la funcion");
            
            if(argumentsList.length > 2){

                throw new Error("No se puede ingresar mas de 2 parametros");

            }else if(isNaN(argumentsList[0]) || isNaN(argumentsList[1])){


                throw new Error("Solo se puede ingresar numeros pibe");


            }else{

                return target(...argumentsList);

            }

        },

    }

    const proxySuma = new Proxy(suma,handlerSuma);

Bikatti

Proxy

El operador in devuelve true si la propiedad especificada está en el objeto especificado o su prototipo.

Carlos Alfonso Garcia Rivera

muy interesante el uso de los proxy, puede aplicarse en alguna api que se esta desarrollando

Esteban Martini

<h3>Ejemplo de proxy para lectura:</h3>

vamos a hacer un proxy que evite revelar la contrase?a del usuario

// 1. definimos el objeto original, el cual NO se va a manipular directamente

let privatePersona = {
  apellido: "juan",
  nombre: "perez",
  id: 1,
  pass: "awhh!234FAsd",
};

/* 2. para evitar que se devuelva la propiedad pass de forma plana, definimos un objeto handler, con la propiedad get. 
es decir, cada vez que se quiera leer una propiedad del objeto primero va a pasar por el este handler 
*/ 
const handler = {
  get: function(obj, prop, value){
    if(prop === 'pass'){
      console.error('You\'re Courious mmm!! you can\'t see this ')
      return '*'.repeat(obj[prop].length)
    }
      
    return obj[prop]
  }
}

//3. definimos el objeto que SI, vamos a usar para interactuar, que es el proxy definido por el objeto original y el handler
const persona = new Proxy(privatePersona, handler)

ahora podemos interactuar con el objeto y probar ver una property

> persona.apellido
< "Ramon"

> persona.pass
< You're Courious mmm!! you can't see this 
< "************"

Esteban Martini

<h3>Ejemplo de proxy para escritura:</h3>

vamos a hacer un proxy para evitar que se escriba la propiedad id

// 1. definimos el objeto original, el cual NO se va a manipular directamente

let privatePersona = {
  apellido: "juan",
  nombre: "perez",
  id: 1,
  pass: "awhh!234FAsd",
};

/* 2. para evitar que se escriba la propiedad id, definimos un objeto handler, con la propiedad set. 
es decir, cada vez que se quiera setear una propiedad del objeto primero va a pasar por el este handler 
*/ 
const handler = {
  set: (obj, prop, value){
    if(prop === 'id')
      return console.error('No se puede modificar la propiedad id')
    return obj[prop]=value
  }
}

//3. definimos el objeto que SI, vamos a usar para interactuar, que es el proxy definido por el objeto original y el handler
const persona = new Proxy(privatePersona, handler)

ahora podemos interactuar con el objeto y probar setear una property

> persona.apellido = "Ramon"
< "Ramon"

> persona.id=2
< No se puede modificar la propiedad id

> persona
< Proxy {apellido: "Ramon", nombre: "perez", id: 1, pass: "awhh!234FAsd"}

Raul Hernández