Conociendo los conceptos básicos de la programación orientada a objetos, es momento de implementarlo en el código fuente de Javascript. Veamos cómo puedes crear clases y objetos a partir de estas.
Sintaxis de las clases y objetos
La mayoría de los lenguajes de programación poseen una sintaxis muy similar e intuitiva cuando se trata de crear clases y objetos. Los conceptos que aprendas sobre POO en Javascript, el día de mañana, te servirán para trabajar con otros lenguajes de programación.
Clases en Javascript
Crear tu primera clase en Javascript para luego crear objetos es muy sencillo. Basta con utilizar la palabra reservada class, seguido del nombre de la clase, comenzando siempre con mayúscula para seguir las buenas prácticas.
classMokepon{ }
Dentro de la clase, implementamos una función especial llamada constructor() que nos permitirá, justamente, construir objetos a partir de esta clase. El constructor recibe como parámetro los atributos o la información que la clase necesita para crear el objeto.
El constructor recibe por parámetro la información que necesita, en el orden indicado, y guardamos la misma dentro de las propiedades que llevan el mismo nombre.
Observa otra palabra muy importante en la programación orientada a objetos: this. La misma hace referencia al objeto actual donde te encuentras. Siempre que quieras acceder a un atributo o método dentro de la clase, lo harás con this.
Objetos en Javascript
La acción de crear un objeto a partir de una clase, lo conocemos con el nombre técnico de “Instanciar”. Siempre que tengas que crear un objeto, te encuentras instanciando una clase y creando el mismo.
Para crear una instancia de tu clase en Javascript, tienes que utilizar la palabra reservada new seguido del nombre de la clase que quieres intanciar.
let hipodoge = new Mokepon('Hipodoge', './assets/hipodoge.jpg', 5);
Al usar la clase como una función y pasándole la información propia del objeto, internamente te encuentras llamando al constructor de la clase que devolverá como resultado el objeto y lo guardamos en la variable del tipo let para utilizar el objeto posteriormente.
De esta manera puedes tener N cantidad de instancias de una clase y crear un objeto nuevo por cada Mokepon en tu videojuego.
Si haces un log de esta variable en la consola del navegador, observarás como toda la información del objeto se encuentra agrupada.
console.log(hipodoge);
Si no conocías aún la función console.log() te servirá muchísimo de ahora en adelante para visualizar los datos de tu aplicación y corroborar que sean correctos.
Conclusión
Hasta este punto, ya conoces los conceptos básicos tanto teóricos como prácticos sobre la programación orientada a objetos. Suficiente para optimizar el código de tu software y volver lo más profesional, escalable y comprensible.
El atributo global class es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase o funciones como el método document. 💚 💚 💚
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
classNerd{
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???
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])
Hay un video que es super bueno para atender de una manera muy sencilla lo de las clases y objetos(el paradigma orientado a objetos). Ayuda bastante a personas que apenas están empezando y recordar ciertas cosas si ya sabes programar.
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)
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.
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
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.
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.
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.
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.
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.