Construcción de Clases y Objetos en JavaScript

Clase 47 de 84Curso Gratis de Programación Básica

Resumen

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.

class Mokepon { }

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.

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

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);
Visualización en consola de un objeto

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.


Contribución creada por: Kevin Fiorentino (Platzi Contributor)