Las clases son un concepto fundamental cuando queremos crear proyectos con una arquitectura más sólida y duradera que las funciones sueltas. Este concepto se construye alrededor del constructor de una clase, una idea a veces difícil de entender.
En este post, te enseñaremos qué es el constructor de una clase en JavaScript para afianzar tus conocimientos sobre la orientación a objetos en este lenguaje.
¿Qué es el constructor de una clase en JavaScript?
El constructor de una clase en JavaScript es un método especial que nos permite crear e inicializar los objetos derivados de una nueva instancia de una clase. Si tienes dudas sobre el concepto de instancia, te recomendamos leer nuestro post sobre clases e instancias en JavaScript.
El método constructor recibirá como parámetro la propiedad o propiedades que decidamos que son fundamentales para el funcionamiento de la clase. Es decir, lo indispensable de una clase siempre estará dentro de su constructor, pues hace que este elemento esté desde la creación de la clase. Entonces, si estuviéramos creando una clase coche, sería indispensable que la propiedad llaves esté en su constructor, pues sin ellas no se puede abrir, arrancar y conducir el coche.
Un ejemplo ideal para un constructor de una clase en JavaScript es pensar que estamos creando un controlador del patrón MVC. Entonces, como una de sus funciones es ejecutar acciones sobre un nodo del DOM, este elemento será el parámetro perfecto para insertar dentro del método constructor.
Al ser un método especial, constructor debe insertarse siempre dentro de una clase. A continuación, de ponemos un ejemplo:
class TweetListController {
constructor (text) {
console.log ("constructor de TweetListController:", text);
}
}Las líneas de código anteriores definen una clase llamada TweetListController, en la que el constructor recibe una propiedad text. Dentro de esta clase, además, tenemos un comando console.log que pinta una frase o string y el texto recibido por el constructor.
Es muy importante concentrarnos en determinar el parámetro ideal para pasar por el constructor de una clase en JavaScript. Esto debe ser en función al rol de la clase que estemos creando. Es decir, por ejemplo, un constructor de un controlador no debe recibir como parámetro los datos del modelo, pues parte de lo que hace un controlador en el patrón MVC es gestionar la obtención de dichos datos, recibirlos como parámetro requiere que ya estén gestionados previamente.
¿Cómo funciona el constructor de una clase en JavaScript?
Como te comentábamos antes, el constructor de una clase en JavaScript se declara dentro de la clase. Ahora, además de declarar al constructor y sus parámetros, el siguiente paso normalmente es definir dichos parámetros como propiedades de la clase. Para ello, usamos la palabra clave this y le otorgamos un nombre de propiedad. Luego, igualamos esto al parámetro deseado. A continuación, te ponemos un ejemplo con la clase creada:
class TweetListController {
constructor (text) {
this.numeroDeConstructor = text
console.log ("constructor de TweetListController:", text);
}
}Constructor e instancias
El método constructor se pone en acción cuando creamos una nueva instancia de nuestra clase. Es decir, se ejecuta desde fuera de la clase creada. Entonces, supongamos que tenemos las siguientes instancias de la clase anterior:
const controller1 = new TweetListController (1);
const controller2 = new TweetListController (2);
const controller3 = new TweetListController (3);
const controller4 = new TweetListController (4);Con las distintas instancias anteriores estamos ejecutando el constructor de una clase y pasando distintos valores para ser procesados como su parámetro.
Es decir, cuando creamos la instancia controller1 y le pasamos el número 1 como valor de la clase, el constructor de TweetListControler recibe este valor como la propiedad text y nos devuelve por consola lo siguiente:
constructor de TweetListController: 1El constructor solo se puede ejecutar en el momento en el que creamos una nueva instancia de una clase (un new sobre el nombre de clase). En este sentido, es muy importante tener en cuenta que, en las clases, el constructor solo se ejecuta una vez. Esto quiere decir que, en nuestro ejemplo, el console.log de nuestro código nunca va a volver a salir para cualquiera de las instancias controllerx.
Tras leer este post, sabes exactamente qué es el constructor de una clase en JavaScript y cómo funciona. Sin embargo, todavía queda mucho por aprender sobre este y otros lenguajes de programación fundamentales para el desarrollo web. Por ello, te recomendamos nuestro Bootcamp Desarrollo Web Full Stack, donde aprenderás en profundidad a trabajar con herramientas y lenguajes como JavaScript, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡No dudes en pedir más información!
