Tema 3 · Funciones Constructoras

Funciones Constructoras y el Operador new: La POO antes de ES6

Aprende cómo funcionaba la POO tradicional en JavaScript antes de la llegada de las clases ES6 mediante funciones constructoras y la propiedad .prototype.

La Cadena de Prototipos: [[Prototype]], __proto__ y Delegación en Memoria Clases en ES6: La Sintaxis class, constructor() y Azúcar Sintáctico

La POO Tradicional en JavaScript (Antes de 2015)

Antes de la especificación ECMAScript 2015 (ES6), en JavaScript no existía la palabra clave class. Durante más de dos décadas, los desarrolladores de JavaScript crearon millones de aplicaciones utilizando Funciones Constructoras.

Por convención en la comunidad, las funciones constructoras se nombran con Mayúscula inicial (PascalCase) para recordar a los programadores que deben invocarse con el operador new: 

function Usuario(nombre, email) {
    this.nombre = nombre;
    this.email = email;
}

¿Qué Hace Realmente el Operador `new`?

Cuando escribes const u = new Usuario("Carlos", "[email protected]");, el motor de JavaScript ejecuta cuatro pasos exactos en milisegundos:

  1. Crea un nuevo objeto plano vacío en memoria: {}.
  2. Enlaza su prototipo: Le asigna a su puntero interno [[Prototype]] el objeto Usuario.prototype.
  3. Ejecuta el constructor con `this`: Llama a la función constructora haciendo que la palabra clave this apunte al nuevo objeto vacío.
  4. Retorna el objeto: Si la función no retorna explícitamente otro objeto, devuelve el objeto recién creado.

El Error Clásico de Memoria vs. la Propiedad `.prototype`

❌ Error: Método dentro del Constructor
function Usuario(nombre) {
  this.nombre = nombre;
  // ¡FATAL! Si creas 10,000 usuarios,
  // se crearán 10,000 funciones idénticas
  // en la memoria RAM:
  this.saludar = function() { ... };
}
✔ Correcto: Método en el Prototipo
function Usuario(nombre) {
  this.nombre = nombre;
}

// ¡UNA SOLA función compartida en RAM
// por todas las instancias de Usuario:
Usuario.prototype.saludar = function() {
  return `Hola, soy ${this.nombre}`;
};

⚡ Función Constructora y Compartición Eficiente en Prototipo

Ejecuta el código en el Sandbox y comprueba que ambas instancias comparten la misma referencia en memoria:

FuncionConstructora.js
Solo lectura 
// 1. Función Constructora (Solo inicializa estado propio)
function CuentaBancaria(titular, saldoInicial = 0) {
    this.titular = titular;
    this.saldo = saldoInicial;
    this.numeroCuenta = "ES-" + Math.floor(100000 + Math.random() * 900000);
}

// 2. Métodos añadidos al Objeto Prototype (Eficiencia de Memoria)
CuentaBancaria.prototype.depositar = function(monto) {
    if (monto <= 0) return;
    this.saldo += monto;
    console.log(`[${this.titular}] Depósito: +$${monto.toFixed(2)} | Saldo: $${this.saldo.toFixed(2)}`);
};

CuentaBancaria.prototype.retirar = function(monto) {
    if (monto > this.saldo) {
        console.warn(`[${this.titular}] ⚠️ Fondos insuficientes para retirar $${monto.toFixed(2)}.`);
        return false;
    }
    this.saldo -= monto;
    console.log(`[${this.titular}] Retiro: -$${monto.toFixed(2)} | Saldo: $${this.saldo.toFixed(2)}`);
    return true;
};

CuentaBancaria.prototype.obtenerResumen = function() {
    return `Cuenta #${this.numeroCuenta} | Titular: ${this.titular} | Saldo: $${this.saldo.toFixed(2)}`;
};

// ==========================================
// PRUEBA DE INSTANCIAS Y EFICIENCIA EN RAM
// ==========================================
const cuenta1 = new CuentaBancaria("Valeria Torres", 1000);
const cuenta2 = new CuentaBancaria("Carlos Mendoza", 500);

console.log("=== RESÚMENES DE CUENTA ===");
console.log(cuenta1.obtenerResumen());
console.log(cuenta2.obtenerResumen());

console.log("\n=== OPERACIONES ===");
cuenta1.depositar(300);
cuenta2.retirar(200);

console.log("\n=== PRUEBA DE EFICIENCIA EN MEMORIA ===");
// ¿Ambas cuentas comparten la EXACTA MISMA función en memoria?
const compartenMismoMetodo = (cuenta1.depositar === cuenta2.depositar);
console.log("¿cuenta1.depositar y cuenta2.depositar son la misma función en RAM?:", compartenMismoMetodo); // true!

// Verificación de tipo con instanceof
console.log("¿cuenta1 es instancia de CuentaBancaria?:", cuenta1 instanceof CuentaBancaria); // true
console.log("¿cuenta1 es instancia de Object?:", cuenta1 instanceof Object); // true
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Por qué en la POO tradicional con funciones constructoras se deben adosar los métodos a Constructor.prototype en lugar de declararlos con this dentro de la función?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de Programación Orientada a Objetos en JavaScript (POO) y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.