Métodos Estáticos en JavaScript: Creación de SuperObject
Resumen
Generaremos un prototipo en el cual añadiremos 2 métodos estáticos: uno para determinar si un determinado valor es del tipo object y otro para realizar deep copy. A partir del último código implementado, añadamos las siguientes líneas de código:
Crearemos una función SuperObject vacío. Esto en realidad será un prototipo:
functionisObject(subject){returntypeof subject =="object";}functionisArray(subject){returnArray.isArray(subject);}functionSuperObject(){}// 👈👈👈👈functionrequiredParam(param){thrownewError(param +" es obligatorio");}functionLearningPath({// PROTOTIPO name =requiredParam("name"),// Campo es obligatorio courses =[],// Lista de Cursos que pertencen a la ruta de aprendizaje}){this.name= name;this.courses= courses;}functionStudent({// PROTOTIPO name =requiredParam("name"), email =requiredParam("email"), age, twitter, instagram, facebook, approvedCourses =[], learningPaths =[],}={}){// ASIGNACIÓN DE ATRIBUTOSthis.name= name;this.email= email;this.age= age;this.approvedCourses= approvedCourses;this.socialMedia={ twitter, instagram, facebook,};constprivate={"_learningPaths":[],};// "this" referencia al prototipo "Student"Object.defineProperty(this,"learningPaths",{get(){// GETTERreturnprivate["_learningPaths"];},set(newLp){// SETTERif(newLp instanceofLearningPath){// Si es que SÍ es una instancia, añadimos al array privado "_learningPaths"private["_learningPaths"].push(newLp);}else{// "LPs" hace referencia a Learning Pathsconsole.warn("Alguno de los LPs que quieres añadir NO es una instancia del prototipo LearningPath");}},});for(learningPathIndex in learningPaths){this.learningPaths= learningPaths[learningPathIndex];}}
Añadimos un método estático por fuera el prototipo SuperObject para validar que un dato sea del tipo object. Luego, agregamos otro método que nos permita hacer deep copy a un objeto:
functionisObject(subject){returntypeof subject =="object";}functionisArray(subject){returnArray.isArray(subject);}functionSuperObject(){}// Agregamos directamente estos métodos estáticos a nuestro prototipo "SuperObject"SuperObject.isObject=function(subject){// 👈👈returntypeof subject =="object";}SuperObject.deepCopy=function(subject){// 👈👈let copySubject;const subjectIsObject =isObject(subject);const subjectIsArray =isArray(subject);if(subjectIsArray){ copySubject =[];}elseif(subjectIsObject){ copySubject ={};}else{return subject;}for(key in subject){const keyIsObject =isObject(subject[key]);if(keyIsObject){ copySubject[key]=deepCopy(subject[key]);}else{if(subjectIsArray){ copySubject.push(subject[key]);}else{ copySubject[key]= subject[key];}}}return copySubject;}functionrequiredParam(param){thrownewError(param +" es obligatorio");}functionLearningPath({// PROTOTIPO name =requiredParam("name"),// Campo es obligatorio courses =[],// Lista de Cursos que pertencen a la ruta de aprendizaje}){this.name= name;this.courses= courses;}functionStudent({// PROTOTIPO name =requiredParam("name"), email =requiredParam("email"), age, twitter, instagram, facebook, approvedCourses =[], learningPaths =[],}={}){// ASIGNACIÓN DE ATRIBUTOSthis.name= name;this.email= email;this.age= age;this.approvedCourses= approvedCourses;this.socialMedia={ twitter, instagram, facebook,};constprivate={"_learningPaths":[],};// "this" referencia al prototipo "Student"Object.defineProperty(this,"learningPaths",{get(){// GETTERreturnprivate["_learningPaths"];},set(newLp){// SETTERif(newLp instanceofLearningPath){// Si es que SÍ es una instancia, añadimos al array privado "_learningPaths"private["_learningPaths"].push(newLp);}else{// "LPs" hace referencia a Learning Pathsconsole.warn("Alguno de los LPs que quieres añadir NO es una instancia del prototipo LearningPath");}},});for(learningPathIndex in learningPaths){this.learningPaths= learningPaths[learningPathIndex];}}
¡Listo! Ya podemos usar estos métodos desde este nuevo prototipo SuperObject en nuestro código.
const copia =SuperObject.deepCopy({nombre:"Objecto Copia",valor:100,});console.log(copia);console.log(SuperObject.isObject(20));// falseconsole.log(SuperObject.isObject("JS"));// falseconsole.log(SuperObject.isObject({name:"Juanito"}));// trueconsole.log(SuperObject.isObject(["juan"]));// true 👈👀 // Los Arrays son instanticas del superprototipo Array y a su vez esta superclase hereda// del superprototipo Object. Por tanto, son también considaradas del tipo "object"// y es por eso que nos sale "true"
Como reto te dejamos modificar el método isObject del prototipo SuperObject para que cuando le mandemos un Array como argumento, este nos indique false. 👀
Llevo 3 clases perdida literal, la borradera de codigo hace que todo sea confuso. Soy participe de trabajar en archivos diferentes por clase
Yo igual, creo que debemos tener mas experiencia programando para poder seguirle el ritmo al profe y entenderlo todo.. He visto cada clase 3 veces y no logro entender el flujo del proyecto... El hecho de borrar y pegar y mover el codigo de un lado para el otro con los nombres de las variables muy parecidas hace las ultimas clases muy confusas
De hecho, yo me perdí demasiado en eso. Descomentar código, cortar y pegar, borrar lo que ya se había hecho. Crear funciones fuera de los prototipos que al final son métodos del mismo, hizo que ya no supiera que realmente estabamos haciendo.
Creo que sería mucho mejor, que a la par de que se enseñan los conceptos, se muestren las buenas practicas de como construir y estructurar código. Al menos en las sagas de cursos de Python, los profes siempre hacen eso, aunque sea un concepto chiquito de funciones o clases, aplican las buenas practicas a seguir. Y así, los estudiantes vamos aprendiendo por imitación las buenas practicas del mundo profesional.
Mi solución para que no tome los arrays como objetos :
Saludos. 👋
Esta es mi solución al reto. Ademas de la comprobación del Array, agregué una comprobación para null, ya que existe un bug en ECMAScript que indica que null es un tipo objeto.
Lo que dice el profesor: Los arrays son instancias del prototipo Array, que es a su vez una instancia del super prototipo Object; lo vemos en la consola:
!Los Arrays también son Object
Nos damos cuenta de que podemos comprobar los array de la misma manera que los objetos:
Sinceramente aun no llego a entender como funciona typeof, para mí, por ahora más se trata de memorizar que retorna en cada situación que lo usemos.
Un poco de documentación:
typeof - JavaScript - MDN Web Docs
Typeof Explained - freeCodeCamp
Excelente aporte.
typeof es un atributo que nos indica que tipo de arreglo es objecto o array o strings
Para mi el curso termino en el capitulo 13 el 14 es un extra para averiguar por uno mismo, el 16, 17 y 18 volvere a verlos cuando entienda mas de JSPOO porque me perdi.
el copy y paste para mover código de un lado a otro, es demasiado confuso!!!
Hola me gusto mucho el curso, pero si me costo trabajo seguir el ritmo, Me pregunto si podrían hacer esto mismo pero con ejemplos más pequeños para no perdernos de pronto con tanto código. Mi solución basando me a lo que se vio desde en clases pasadas podemos hacer lo siguiente:
<SuperObject.isObject=function(subject){if(subject.constructor.name=="Array"){// con esta modificacion podemos saber si subject es un array[] o un object{}returntypeof subject =="Array";}else{returntypeof subject =="object";}}>
El último módulo fue confuso para mí...muy rápido...me quito las ganas de hacer apuntes :(, porque no iba a entender...espero hagan un LITE de este curso para quienes están siguiendo la ruta de JS a profundidad desde un inicio.
me perdí, no entendí el punto de la clase, se que esta en el titulo pero lo que vi es que en vez de usar "deepcopy()" o, "isObject"
lo escribe mas largo con "superObject.deepcopy()" cual es la utilidad de eso?
Tal vez es medio tarde la respuesta, pero es una forma de tener todo el código relacionado junto y a su vez que no colisione con nada.
Supone que entras en un proyecto que ya tiene una función que es:
Ya aprendimos porque esta mal, pero capaz reemplazar esta funcion directamente pueda crear problemas en otros lados, entonces creas la clase, y adentro tenes distintos metodos.
Con el ejemplo que se puede entender mas facil seria por ejemplo si tenes que calcular areas y perimetros de cuadrados y circulos ponele.
En vez de llamar a calcularAreaCirculo, calcularAreaCuadrado por ejemplo, podrias hacer Cuadrado.area() y listo.
Por lo que entendi es crear una Funcion Madre (SuperObject) la cual tiene dentro todos sus metodos Estáticos ( funciones ) para la resolucion de codigo, y bien como dice el otro compañero, asi no colisionan entre si. Es una forma mas de tenerlo todo organizado
:n este largo comentario quiero agradecer por la dinámica del profesor y experiencia personal, valoración del contenido y recomendaciones y mantener mi persistencia y entusiasmo en mi educación autodidacta:
Quiero destacar la excelente dinámica del profesor. El ejemplo del juego "pato, pato, ganzo" me hizo recordar no solo la diversión de la infancia, sino también la importancia de la fortaleza como desarrolladora al establecer diferencias, identificar puntos clave y formar un criterio propio durante el desarrollo.
Personalmente, disfruté mucho el contenido de la clase por su sencillez y claridad. Para complementar el aprendizaje, recomiendo a mis compañeras no basarse únicamente en el video. En mi caso, aproveché al máximo los "Recursos" junto a la pestaña "Temario". Allí se puede leer el código y el profesor, con gran inteligencia, marca con emoticones las nuevas líneas de código, lo que nos permite generar un criterio propio.
Muchas gracias por esta clase tan enriquecedora. Me encuentro muy emocionada por continuar mi aprendizaje y profundizar en los conocimientos adquiridos con Javascript.
Aqui el ejemplo con classes y prototipos, es lo mismo.
Con prototipos:
//Super Object prototype functionSuperObject(){}//function static for deepCopySuperObject.deepCopy=function(subject){if(typeof subject !=='object'|| subject ===null)return subject
const copyOfElem =Array.isArray(subject)?[]:{}for(const key in subject){const current = subject[key]; copyOfElem[key]=this.deepCopy(current);}return copyOfElem
}// function statis for evaluate if there is an object or notSuperObject.isObject=function(subject){return(typeof subject ==='object'&& subject !==null&&!Array.isArray(subject))}
ufff se nota que el profe tenía ganas de terminar el curso, no veas los dos últimos vídeos como se lía la cosa, he tenido que poner los vídeos la 2º vez a velocidad 0.5x :)
No sabes lo que lo estoy sufiendo. Dos segundo, pauso el video y me agarro la cabeza. Play al video, y dos segundos mas tardes, pauso el video y me agarro la cabeza. 😥
para mi timothée chalamet enseña bien solo que siento que le dan muy poco de tiempo para explicar y dejar ejercicios para practicar
Hace demasiados copia y pega y de verdad me cuesta seguir el ritmo
Esta es mi solución al problema que toma los Arrays como objetos
Cuando un programa esta hardcoded nos referimos a que hay partes de él o casi todo el programa donde el programa inserta información por ti o auto rellena información de acuerdo a lo que estás capturando.
Ejemplo si pones un código postal y la ciudad en un programa este podría rellenar fácilmente la ciudad, dirección, estado, país, código telefónico del estado.
Hace la vida más fácil al usuario.
SuperObject.isObject = function(subject){//etc} es acaso lo mismo que static??? no entendi esa parte
Exactamente.
:D
Perdon, me perdí un poquito: ¿Para que exactamente sirve el static? ¿Cual es la diferencia entre clase estatico y normal?
Los métodos normales solo se pueden ejecutar desde instancias. Los métodos estáticos pueden vivir dentro de clases y usarse sin necesidad de crear instancias. :D