A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Proxy

18/42
Recursos

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.

Aportes 121

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Apuntes de la clase:

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);

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>

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

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

Ir a la navegaci贸nIr a la b煤squeda

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.

casi

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.

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

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)

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)

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/

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!!!

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**

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)

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 鈥渙bj.prop鈥?

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;```

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>

Como complemento a la clase, en javascript existe un objeto llamado 鈥淩eflect鈥 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

Les comparto mi ejercicio 馃槉, tambi茅n le agregu茅 el handler set


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

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

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

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

en la linea 36

Levenshtein.get(key, prop) <= 3 

si quieren que les cambie a ese signo del profesor deben usar la font 鈥渇ira 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

Entre mas aprendo mas emocionado estoy.

![](

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 ??

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

Una trampa para obtener valores de propiedad!
Interesante.

S煤per mega interesante. Gracias!!

Muy buena clase!!! Soundex est谩 muy bueno, compara la similitud de 鈥渃omo suenan鈥 las palabras!!!

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??

hola, alguien sabe que fuente usa richard en VsCode?

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

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);```

Cambie un poco el codigo del ejemplo para que diera mas de una sugerencia, con esto si tenes colores como 鈥渂lueHard鈥 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);```

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

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

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);
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)

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

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?


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

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)

Veamos si entend铆: El proxy act煤a sobre la estructura de datos 鈥渙bjeto鈥 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.

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

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.

muy bueno

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

Levenshtein distance este es una buena tecnica

no es libreria es Biblioteca

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

Este curso est谩 m谩gico !

En qu茅 momento es recomendable usar los Proxy??

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.

comparto un PROXY --SET muy interesante

let validator = {
set: function(obj, prop, value) {
if (prop === 鈥榓ge鈥) {
if (!Number.isInteger(value)) {
throw new TypeError(鈥楾he age is not an integer鈥);
}
if (value > 200) {
throw new RangeError(鈥楾he 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 = 鈥榶oung鈥; // Throws an exception
person.age = 300; // Throws an exception

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

A alguien se le ocurre alg煤n ejemplo de un caso m谩s real?

Super 煤til para una mejor interacci贸n con el usuario!

Me pareci贸 muy interesante esta clase

Proxy鈥 nueva clase por explorar!

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

Que increible!

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

Increible los proxy en JS.

Wow,Que interesante ! 馃槷

Excelente explicaci贸n, me gusto mucho esta clase.

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

Desconoc铆a por completo este concepto 馃槷

OMG鈥

Estoy flippando jajaja

馃槃

Qu茅 cool es proxy.

Woooow

Excelente explicaci贸n !

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

Para roforzar un poco acerca de Proxy:
enlace

Me marca un error, Levenshtein no esta definido

Esto debe ser util para los motores de b煤squeda tambi茅n. O por lo menos me lo imagino as铆 en principio

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

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 鈥渢rampas鈥 (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.

Complementando un video de proxy

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

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.

estannueva caracteristica es bien interesante

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

Genial forma de crear las ayudas

Me pregunt茅 cual era la diferencia de usar 鈥渋n鈥 y "hasOwnProperty"
y encontre esto post

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

Buna clase!

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>

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

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.

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

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

in

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 馃

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>

in

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 馃

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);

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).

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

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

<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 
< "************"
<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"}

Tambi茅n recomiendo usar console.warn para darle m谩s enfasis a la sugerencia 馃槂