Construcción de Clases y Objetos en JavaScript

Yo por fin entendiendo cuando Juan David dijo que LUEGO crearíamos las demás mascotas del juego y que realmente nunca se le olvidaron los otros tres

Resumen:

Usamos la palabra reservada class para crear una clase (que debe iniciar con Mayuscula) y la palabra reservada constructor para definir los atributos que tendrán nuestros futuros objetos.

Con this.atributo + atributo vamos ligando cada uno de los atributos y finalmente podemos crear variables = new ‘Clase’ y los valores de sus atributos

Ejemplo

class Nerd {
    constructor(nombre, foto, vida) {
        this.nombre + nombre
        this.foto + foto
        this.vida + vida
    }
}

let rajesh = new Nerd('Rajesh', './assets/rajesh.png', 3)

Pro tip: Con el portapapeles de windows 11 se facilita la tarea de copiar y pegar del html al js sin tener que andar cambiando constantemente de archivo

Duda: Por qué los nuevos objetos se declararon con let y no con const cómo aprendimos en la clase anterior???

Para quienes les guste, en visual studio code hay un theme de platzi muy bueno

)

Las clases inician con mayúsculas.

Si quieren sacar algo de las cosas copiadas sin tener que copiarlo nuevamente, pueden usar el atajo win + v (en Windows [además se debe activar en la configuración])

class = Es la palabra reservada para generar una clase.

class “Mokepon” – Mokepon es el nombre de la clase, la única regla es que todos los nombres de las clases tienen que iniciar en mayúsculas.

constructor = Es la palabra reservada para construir un objeto, aquí van integradas las propiedades que tienen los objetos, como nombre, imagen, etc.;

Class Mokepom {
Constructor (nombre, foto, vida)
}

this = es una palabra reservada para indicar “esto mismo – algo inherente”. Ejemplo:

this.nombre = nombre
this.foto = foto
this.vida = vida

Ya que tenemos lo anterior podemos iniciar a construir los objetos (en este caso, los mokepones), para esto tenemos que generar una variable con el nombre del mokepon, por ejemplo:
Let hipodoge = new Mokepon

new = es una palabra reservada que indica la creación de un nuevo objeto de una clase que ya existe o hemos creado, en nuestro caso sería la clase Mokepon

let hipodoge = new Mokepon (“Hipodoge”, “url-link-imagen.png”, 5)

Bueno he creado los objetos en automático, ahora, si escribo por el nombre, obtengo las propiedades de cada uno.

class Mokepon {
    constructor(nombre, foto, vida) {
        this.nombre = nombre
        this.foto = foto
        this.vida = vida
    }
}

let personajes = [
    {
        nombre:'hipodoge',
        url_img:'./assets/mokepons_mokepon_hipodoge_attack.png',
        vida: 5
    },
    {
        nombre:'capipepo',
        url_img:'./assets/mokepons_mokepon_capipepo_attack.png',
        vida: 5
    },
    {
        nombre:'ratigueya',
        url_img:'./assets/mokepons_mokepon_ratigueya_attack.png',
        vida: 5
    }
]

for (x=0; x<Object.keys(personajes).length; x++) {
    let obj = personajes[x].nombre;
    obj = new Mokepon(personajes[x].nombre, personajes[x].url_img, personajes[x].vida)
    console.log(obj.nombre)
}

console.log (hipodoge)

esta funcion sirve para visualizar los objetos de una variable, en nuestra consola.

En este ejemplo, seria visualizar los objetos de hipodoge.

Me gusta la forma de enseñanza que tiene el profe Diego, ademas que es muy adecuado que nos deje abajo del video el recurso muy bien explicado y con ejemplos, ojala en todos los cursos realizaran un buen resumen como estos.

Qué genial! Excelente curso, ya veía hace un sobre " clases " y " objetos " y ya lo entiendo mucho mejor

Una de las formas de agregarle la imagen es inyectarlo en html desde el mismo js de la misma integración del nombre aleatorio, dejo la función de la selección del enemigo aleatorio con su imagen

Este es sin agregar la imagen

 function seleccionarEnemigo(){
    let pc=aleatorio(0,dayamones.length -1)

    mascotaEnemiga.innerHTML=dayamones[pc].nombre 
    }

Esta función ya contiene lo añadido de la parte de seleccionar imagen

function seleccionarEnemigo(){
    let pc=aleatorio(0,dayamones.length -1)

    mascotaEnemiga.innerHTML=dayamones[pc].nombre +  `<img src=${dayamones[pc].foto} alt=${dayamones[pc].nombre} >`
    }

el truco es agregar “+” y lo que inyectaras en el html en este caso la imagen desde la misma variable

con esto va a ser mas facil programar!!

Pasar primero por el curso de POO es una buena idea para entender muy bien todo esto

se parece a la programación orientada a objetos jejejejee

Excelente clase

me gusta que este profesor no usa atajos para enseñar, lo cual, para los nuevos es bueno

Por fiiiin entendí qué rayos es el this y cómo funciona todo el asunto de las clases 😮

Cuando usamos this.nombre_variable, estamos declarando que queremos que se genere esa variable que va a contener el valor que le pasamos por parámetro en el constructor. A diferencia de otros lenguajes, que es necesario crear la variable primero y luego hacer referencia a ella con this o el nombre de la variable directamente. Esto si ya conoces otro lenguaje puede generar confusión.

para ver todos los objetos en console.log al mismo tiempo hay que envolverlos en llaves:
console.log({hipodoge, capipepo, ratigueya})

class --> clase
estructura de clase:
class nombre{
propiedades…
}

this.nombre --> apuntya a un objeto especifico

console.log() --> mensaje en consola

No había entendido la clase de objetos y clases, pero con esta clase del profe quedó muy clara

Tremenda clase, me toca volver a colocar a 0.85x y ahi vamos 😀

El profe es excelente, explica de 10!

Excelente explicación, aunque siento que me confunde un poco JS.

Bien explicado por parte del profesor 😃

Siempre me explicaban este tema…pero jamás pude entenderlo a la perfección. Con Ud es como aprender sumas y restas…lo hace ver muy fácil. Espero algún día estrechar su mano para agradecerle.

Los nombres de las clases inician con la letra mayúscula, a diferencia de las variables. Dentro de la clase va el constructor, donde se colocan las propiedades que van a tener los objetos. Ahí mismo se crean variables de clase con estructura this.nombre (ejemplo), que guardan valor de parámetros en el constructor.

💪 En esta clase se enseñó a como crear clases, utilizarlas y revisar que funcionen

Las clases son los planos básicos que necesitamos para construir los objetos, y estos objetos pueden incluir ciertos detalles que los hacen distintos entre ellos.
.
Con estos “planos” nos podemos guiar de forma más fácil y práctica para replicar los objetos.

excelente explicacion

interesante y util explicacion

Diego, no solo eres un excelente profesional sino también un excelente pedagogo… Te tomas el tiempo de aclarar cada tema y a ti te entiendo mucho mejor todo :3
Gracias profe!

Me parece increible la forma en que se usan las clases con los objetos para trabajar un videojuego. Sabia que se usa algo de programacion, pero jamas imagine que usa algunos metodos basicos.

clarificando los conceptos, gracias

la mejor explicación

6:57 Diego, pero podías simplemente copiar la estructura de la variable Hipodoge y ahí reemplazabas los parámetros de la clase con los nombres de las diferentes mascotas, porque solo era eso lo que había que cambiar, el resto de la estructura es idéntica por tratarse de los mismos objetos y me parece innecesariamente complicado la forma como lo hiciste, además de que también es más lento.

Cuando creamos una class, clase si o si deben comenzar con Mayuscula:
ejemplo:
class Mokepon
Las propiedades se crean con constructor ósea, ejemplo:

class Mokepon {
constructor (nombre, foto, vida) {
this.nombre = nombre
this.foto = foto
this.vida = vida
}
}

this y new son palabras reservadas.

✅

No había escuchado de las clases, está genial este concepto y lo que nos permite realizar con el código.