Abstracción en POO: ocultar complejidad

Contenido del curso

Clases Grabadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:28

Abstracción en POO: ocultar complejidad

Curso de JavaScript Orientado a Objetos

Clase 11 de 15

Clase 11 / 15

Comentarios (2)2 comentarios

Miguel Lozano

Hace 10 días

// CLASE BASE

class Llanta {
  constructor(marca, tamano) {
    if (this.constructor === Llanta) {
      throw new Error("No puedes instanciar la clase abstracta Llanta directamente.");
    }
    this.marca = marca;
    this.tamano = tamano;
  }

// Cada subclase DEBE implementar sus propios detalles internos
  rodar() {
    throw new Error("El método 'rodar()' debe ser implementado por la subclase.");
  }
}

// Llanta de Carreras
class LlantaCarreras extends Llanta {
  constructor(marca, tamano, compuestoGoma) {
    super(marca, tamano);
    this.compuestoGoma = compuestoGoma; // Ej: "Blando", "Duro"
  }

  rodar() {
    return `Llanta de carreras ${this.marca} (${this.tamano}") rodando a alta velocidad. Se adhiere al asfalto seco usando goma ${this.compuestoGoma}.`;
  }
}

// Llanta Todo Terreno
class LlantaTodoTerreno extends Llanta {
  constructor(marca, tamano, profundidadTacos) {
    super(marca, tamano);
    this.profundidadTacos = profundidadTacos; // Ejemplo: "12mm"
  }

  rodar() {
    return `Llanta todo terreno ${this.marca} (${this.tamano}") rodando sobre lodo. Tracciona usando sus tacos profundos de ${this.profundidadTacos}.`;
  }
}

// La funcion solo sabe que recibe una "Llanta" y que tiene método rodar.
// No le importa si es de carreras, de lodo o de nieve.
function probarNeumatico(llanta) {
  console.log("--- Iniciando prueba de rodamiento ---");
  console.log(llanta.rodar()); 
}


const miLlantaF1 = new LlantaCarreras("Pirelli", 18, "Blando");
const miLlanta4x4 = new LlantaTodoTerreno("Goodyear", 16, "15mm");

probarNeumatico(miLlantaF1);
probarNeumatico(miLlanta4x4);

Miguel Lozano

Hace 10 días

Igual le falta aplicar campos privados, setters y getters. Pero se entiende la idea.

JOSE MARIA SUAREZ GIESE

Hace 4 meses

Tomé el ejemplo de un afilador que afilará varias herramientas, pero el enfoque que tuve era de ocultar el "trabajo sucio" de instanciar una constante para cada herramienta a afilar.

class Afilador {
  constructor(afilador, herramienta){
  this.afilador = afilador
  this.herramienta = herramienta
  }
  afilar(){
    console.log(`Afilando ${this.herramienta} con ${this.afilador}`)
  }
}

// La función oculta el proceso de instanciar (hacer el 'new') y ejecutar el método
function realizarAfilado(afilador,herramienta){
  // Aquí se esconde el trabajo sucio de armar el objeto
  const miAfilador = new Afilador(afilador,herramienta)

  // Se ejecuta la acción
  miAfilador.afilar()     
}

realizarAfilado('piedra','tijera') // Afilando tijera con piedra
realizarAfilado('Afilador Hidráulico','acha') // Afilando acha con Afilador Hidráulico

JOSE MARIA SUAREZ GIESE

Hace 4 meses

Cuando hice el primer reto el código original era este, pero quería tratar de escribir menos líneas:

class Herramienta {
  serAfilada(){
    //Texto por conveniencia
  }
}

class Cuchillo {
  serAfilada(){
    console.log('Afilando el Cuchillo con una piedra')
  }
}

class Tijera {
  serAfilada(){
    console.log('Afilando la Tijera con un afilador cerámico')
  }
}

function afilar(herramienta) {
  // A la función no mi importa el ángulo, ni el tipo de piedra, ni el material.
  // Solo da la orden y muestra el resultado.
  herramienta.serAfilada()
}

const miCuchillo = new Cuchillo()
const miTijera = new Tijera()

afilar(miCuchillo)
afilar(miTijera)

Recursos

La abstracción en programación orientada a objetos te permite enfocarte en lo que importa: usar un objeto sin preocuparte por su complejidad interna. Igual que con una cafetera automática, eliges espresso o capuchino y listo; no necesitas conocer bombas, sensores ni flujos. Aquí verás cómo trasladar esa idea a JavaScript con clases, herencia y métodos públicos.

¿Qué es la abstracción en programación orientada a objetos?

La abstracción consiste en ocultar la complejidad interna y exponer solo lo necesario mediante una interfaz clara. Piensa en un contrato mental: definimos qué se puede hacer, no cómo se hace por dentro. Así, el usuario interactúa con métodos públicos y el resto queda fuera de su atención.

Enfoca el uso, no la implementación.
Define capacidades con nombres claros.
Mantén detalles internos fuera del alcance del consumidor.
Mejora legibilidad y mantenimiento del código.

¿Cómo aplicarlo en JavaScript con herencia y métodos públicos?

En el ejemplo, una class base llamada Dispositivo define lo que se puede hacer: encender. Luego, clases concretas como Televisor y Radio heredan de Dispositivo y deciden cómo se encienden. Una función externa, prender, recibe un Dispositivo y llama a su método sin conocer detalles internos. Así, la abstracción está en el uso del método, no en la herencia en sí.

Dispositivo define la capacidad: encender.
Televisor y Radio implementan el comportamiento concreto.
prender usa Dispositivo sin conocer internos.
JavaScript lo aplica por convención: expones lo público y ocultas lo demás.

// Definición base: contrato de uso
class Dispositivo {
  encender() {
    // Detalle genérico o abstracto por convención.
  }
}

// Implementaciones concretas
class Televisor extends Dispositivo {
  encender() {
    console.log('El televisor se encendió.');
  }
}

class Radio extends Dispositivo {
  encender() {
    console.log('La radio está sonando.');
  }
}

// Uso de la abstracción: función que no conoce los detalles internos
function prender(dispositivo) {
  dispositivo.encender();
}

// Instancias y ejecución
const tv = new Televisor();
const radio = new Radio();

prender(tv);     // El televisor se encendió.
prender(radio);  // La radio está sonando.

Claves a notar:

La abstracción está en el uso de los métodos: prender solo requiere encender.
Las clases concretas deciden el cómo: cada una redefine encender según su comportamiento.
Herencia como medio, no fin: se usa para compartir contrato, no para exponer internos.
Convención en JavaScript: lo público es lo que eliges exponer; lo demás, no se usa fuera.

¿Qué habilidades y conceptos refuerza este enfoque en JavaScript?

Este patrón te ayuda a diseñar código más claro y reutilizable. Separas responsabilidades, reduces dependencias y haces que tu API sea predecible.

Modelado con clases y herencia usando extends.
Definición de métodos públicos con nombres expresivos.
Creación de clases concretas que especializan comportamientos.
Uso de funciones que operan sobre contratos (como prender) en lugar de detalles internos.
Comprensión de contrato mental: Dispositivo establece qué se puede hacer.
Enfoque en ocultar complejidad y exponer lo esencial.

¿Tienes una solución para llevar esta idea más lejos? Compártela en comentarios y cuéntanos cómo aplicarías la abstracción con otro tipo de dispositivo o acción.

// CLASE BASE

class Llanta {
  constructor(marca, tamano) {
    if (this.constructor === Llanta) {
      throw new Error("No puedes instanciar la clase abstracta Llanta directamente.");
    }
    this.marca = marca;
    this.tamano = tamano;
  }

// Cada subclase DEBE implementar sus propios detalles internos
  rodar() {
    throw new Error("El método 'rodar()' debe ser implementado por la subclase.");
  }
}

// Llanta de Carreras
class LlantaCarreras extends Llanta {
  constructor(marca, tamano, compuestoGoma) {
    super(marca, tamano);
    this.compuestoGoma = compuestoGoma; // Ej: "Blando", "Duro"
  }

  rodar() {
    return `Llanta de carreras ${this.marca} (${this.tamano}") rodando a alta velocidad. Se adhiere al asfalto seco usando goma ${this.compuestoGoma}.`;
  }
}

// Llanta Todo Terreno
class LlantaTodoTerreno extends Llanta {
  constructor(marca, tamano, profundidadTacos) {
    super(marca, tamano);
    this.profundidadTacos = profundidadTacos; // Ejemplo: "12mm"
  }

  rodar() {
    return `Llanta todo terreno ${this.marca} (${this.tamano}") rodando sobre lodo. Tracciona usando sus tacos profundos de ${this.profundidadTacos}.`;
  }
}

// La funcion solo sabe que recibe una "Llanta" y que tiene método rodar.
// No le importa si es de carreras, de lodo o de nieve.
function probarNeumatico(llanta) {
  console.log("--- Iniciando prueba de rodamiento ---");
  console.log(llanta.rodar()); 
}


const miLlantaF1 = new LlantaCarreras("Pirelli", 18, "Blando");
const miLlanta4x4 = new LlantaTodoTerreno("Goodyear", 16, "15mm");

probarNeumatico(miLlantaF1);
probarNeumatico(miLlanta4x4);

class Afilador {
  constructor(afilador, herramienta){
  this.afilador = afilador
  this.herramienta = herramienta
  }
  afilar(){
    console.log(`Afilando ${this.herramienta} con ${this.afilador}`)
  }
}

// La función oculta el proceso de instanciar (hacer el 'new') y ejecutar el método
function realizarAfilado(afilador,herramienta){
  // Aquí se esconde el trabajo sucio de armar el objeto
  const miAfilador = new Afilador(afilador,herramienta)

  // Se ejecuta la acción
  miAfilador.afilar()     
}

realizarAfilado('piedra','tijera') // Afilando tijera con piedra
realizarAfilado('Afilador Hidráulico','acha') // Afilando acha con Afilador Hidráulico

class Herramienta {
  serAfilada(){
    //Texto por conveniencia
  }
}

class Cuchillo {
  serAfilada(){
    console.log('Afilando el Cuchillo con una piedra')
  }
}

class Tijera {
  serAfilada(){
    console.log('Afilando la Tijera con un afilador cerámico')
  }
}

function afilar(herramienta) {
  // A la función no mi importa el ángulo, ni el tipo de piedra, ni el material.
  // Solo da la orden y muestra el resultado.
  herramienta.serAfilada()
}

const miCuchillo = new Cuchillo()
const miTijera = new Tijera()

afilar(miCuchillo)
afilar(miTijera)

Resumen

¿Qué es la abstracción en programación orientada a objetos?

Enfoca el uso, no la implementación.
Define capacidades con nombres claros.
Mantén detalles internos fuera del alcance del consumidor.
Mejora legibilidad y mantenimiento del código.

¿Cómo aplicarlo en JavaScript con herencia y métodos públicos?

Dispositivo define la capacidad: encender.
Televisor y Radio implementan el comportamiento concreto.
prender usa Dispositivo sin conocer internos.
JavaScript lo aplica por convención: expones lo público y ocultas lo demás.

// Definición base: contrato de uso
class Dispositivo {
  encender() {
    // Detalle genérico o abstracto por convención.
  }
}

// Implementaciones concretas
class Televisor extends Dispositivo {
  encender() {
    console.log('El televisor se encendió.');
  }
}

class Radio extends Dispositivo {
  encender() {
    console.log('La radio está sonando.');
  }
}

// Uso de la abstracción: función que no conoce los detalles internos
function prender(dispositivo) {
  dispositivo.encender();
}

// Instancias y ejecución
const tv = new Televisor();
const radio = new Radio();

prender(tv);     // El televisor se encendió.
prender(radio);  // La radio está sonando.

Claves a notar:

La abstracción está en el uso de los métodos: prender solo requiere encender.
Las clases concretas deciden el cómo: cada una redefine encender según su comportamiento.
Herencia como medio, no fin: se usa para compartir contrato, no para exponer internos.
Convención en JavaScript: lo público es lo que eliges exponer; lo demás, no se usa fuera.

¿Qué habilidades y conceptos refuerza este enfoque en JavaScript?

Este patrón te ayuda a diseñar código más claro y reutilizable. Separas responsabilidades, reduces dependencias y haces que tu API sea predecible.

Modelado con clases y herencia usando extends.
Definición de métodos públicos con nombres expresivos.
Creación de clases concretas que especializan comportamientos.
Uso de funciones que operan sobre contratos (como prender) en lugar de detalles internos.
Comprensión de contrato mental: Dispositivo establece qué se puede hacer.
Enfoque en ocultar complejidad y exponer lo esencial.

¿Tienes una solución para llevar esta idea más lejos? Compártela en comentarios y cuéntanos cómo aplicarías la abstracción con otro tipo de dispositivo o acción.

Clases Grabadas

POO en JavaScript: cómo pensar antes de programar

Configuración de proyecto JavaScript con Git y npm

Función constructora y prototipo en JavaScript

Objeto literal para manejar balance en JavaScript

Cómo funcionan los prototipos en JavaScript

Clases en JavaScript: constructor y métodos static

Campos privados y setters con validación en JavaScript

Composición en POO: delegar logs a LogTracker

Polimorfismo en JavaScript con duck typing

Herencia en TypeScript: extends y super

Abstracción en POO: ocultar complejidad

Polimorfismo aplicado a calculadoras de rachas

Factory methods para hábitos en JavaScript

Errores de dominio con códigos y validación robusta

POO en JavaScript: cuándo usar objetos y funciones

Abstracción en POO: ocultar complejidad

Progreso del curso

Clases Grabadas

Recursos

Recursos