Funciones constructoras en JavaScript

2 min
Avanzado

Una función constructora en JavaScript es una función especial que nos ayuda a crear y configurar objetos.

Estas funciones funcionan como “plantillas” que definen la estructura y comportamiento de los objetos que crearemos.

Veámoslo con un ejemplo básico:

function Persona(nombre, edad) {
    this.nombre = nombre; // Propiedad nombre
    this.edad = edad;     // Propiedad edad
}

Aquí, Persona es una función constructora que define un objeto con dos propiedades: nombre y edad.

Creación de un objeto con una función constructora

Para crear un objeto basado en una función constructora, usamos el operador new de la siguiente manera:

const persona1 = new Persona("Luis", 30);

console.log(persona1.nombre); // "Luis"
console.log(persona1.edad);   // 30

Cuando usamos el operador new:

Se crea un nuevo objeto vacío.
this dentro de la función constructora apunta a ese nuevo objeto.
El objeto se devuelve automáticamente al final de la función (a menos que devolvamos explícitamente algo diferente).

Este flujo permite que el objeto persona1 herede las propiedades definidas dentro de la función constructora.

Agregando métodos a los objetos

Además de propiedades, podemos agregar métodos (funciones asociadas al objeto) dentro de las funciones constructoras. Por ejemplo:

function Coche(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;

    this.detalles = function() {
        return `Coche: ${this.marca} ${this.modelo}`;
    };
}

const coche1 = new Coche("Toyota", "Corolla");
console.log(coche1.detalles()); // "Coche: Toyota Corolla"

En este caso,

La función detalles se define dentro de la función constructora
Estará disponible en todos los objetos creados con la función Coche.

Aunque podemos definir métodos dentro de una función constructora, existe un problema: cada objeto creado tendrá su propia copia del método. Esto es ineficiente si creamos muchos objetos.

Una mejor práctica es usar el prototipo para compartir métodos entre todos los objetos creados por la función constructora.

function Coche(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
}

// Método compartido en el prototipo
Coche.prototype.detalles = function() {
    return `Coche: ${this.marca} ${this.modelo}`;
};

const coche1 = new Coche("Toyota", "Corolla");
const coche2 = new Coche("Honda", "Civic");

console.log(coche1.detalles()); // "Coche: Toyota Corolla"
console.log(coche2.detalles()); // "Coche: Honda Civic"

Aquí, el método detalles reside en el prototipo de Coche y no se duplica en cada objeto.

Clases como alternativa

Las clases son una forma moderna y más legible de crear objetos, reemplazando parcialmente las funciones constructoras en JavaScript.

class Coche {
    constructor(marca, modelo) {
        this.marca = marca;
        this.modelo = modelo;
    }

    detalles() {
        return `Coche: ${this.marca} ${this.modelo}`;
    }
}

const coche1 = new Coche("Toyota", "Corolla");
console.log(coche1.detalles()); // "Coche: Toyota Corolla"

Bajo el capó, las clases utilizan el mismo mecanismo de prototipos. Pero la sintaxis es más sencilla de usar.

Creación de un objeto con una función constructora

Agregando métodos a los objetos

El problema de los métodos en el constructor

Clases como alternativa