Implementación de Herencia en JavaScript con Clases

Curso Básico de Programación Orientada a Objetos con JavaScript

Contenido del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

17
Examen Final de Programación Orientada a Objetos en JavaScript
01:40 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:05

Implementación de Herencia en JavaScript con Clases

Curso Básico de Programación Orientada a Objetos con JavaScript

Clase 14 de 17

Clase 14 / 17

Recursos

¿Cómo implementar la herencia en JavaScript?

La herencia es un concepto clave en la programación orientada a objetos que permite que una clase derive de otra, compartiendo sus propiedades y métodos. En JavaScript, podemos implementar la herencia utilizando la palabra clave extends en combinación con super, permitiendo que subclases hereden características de clases madre.

¿Qué es la clase base y cómo se define?

En JavaScript, una clase base actúa como la estructura troncal a partir de la cual otras clases pueden derivar. Podemos crear una clase estudiante genérica que contenga atributos comunes a todos los estudiantes, sin importar el tipo de suscripción. Esto permite la reutilización del código.

class Student {
  constructor(name, email, approveCourses) {
    this.name = name;
    this.email = email;
    this.approveCourses = [];
  }

  // métodos comunes para todos los estudiantes
}

¿Cómo crear subclases y extender la clase madre?

Para que una subclase herede las propiedades de la clase madre, utilizamos la palabra clave extends seguida del nombre de la clase madre. Además, es necesario reinstanciar el constructor utilizando super, que permite llamar al constructor de la clase madre.

class FreeStudent extends Student {
  constructor(...props) {
    super(...props);
  }

  // métodos exclusivos para estudiantes gratuitos
}

class BasicStudent extends Student {
  constructor(...props) {
    super(...props);
  }

  // métodos exclusivos para estudiantes básicos
}

¿Cómo validar propiedades específicas en subclases?

Cada subclase puede tener métodos específicos con validaciones personalizadas. Por ejemplo, podemos crear un método approveCourse que verifique si un curso es gratuito antes de que un estudiante de tipo gratuito lo agregue a su lista de cursos aprobados.

approveCourse(newCourse) {
  if (newCourse.isFree) {
    this.approveCourses.push(newCourse);
  } else {
    console.warn(`Lo sentimos ${this.name}, solo puedes tomar cursos gratuitos.`);
  }
}

Para un estudiante de tipo básico, podemos controlar que no apruebe cursos en inglés:

approveCourse(newCourse) {
  if (newCourse.lang !== 'English') {
    this.approveCourses.push(newCourse);
  } else {
    console.warn(`Lo sentimos ${this.name}, no puedes tomar cursos en inglés.`);
  }
}

¿Cómo inicializar objetos específicos con sus respectivas subclases?

Para asignar estudiantes a una clase concreta, simplemente creamos instancias de las respectivas subclases. Por ejemplo:

const juan = new FreeStudent('Juan', 'juan@example.com');
const miguelito = new BasicStudent('Miguelito', 'miguelito@example.com');

En cada caso, podemos invocar métodos específicos dependiendo del tipo de estudiante.

¿Cómo añadir propiedades y probar su funcionalidad?

Implementar características adicionales como propiedades para los cursos aumenta la complejidad y flexibilidad del sistema. Agregar una propiedad opcional como isFree permite realizar decisiones condicionadas en la lógica de negocio.

class Course {
  constructor(name, isFree = false, lang = 'Spanish') {
    this.name = name;
    this.isFree = isFree;
    this.lang = lang;
  }
}

const basicCourse = new Course('Curso de Programación Básica', true);

Finalmente, es importante probar la funcionalidad en un entorno adecuado para asegurarse de que las validaciones funcionan correctamente. Cambiar las instancias y comprobar que se comportan como se espera garantiza que el sistema cumpla sus objetivos.

Implementar herencia en JavaScript mediante clases y subclases ofrece un potente mecanismo para construir aplicaciones modulares y escalables. Esta práctica anima a los desarrolladores a explorar otras técnicas y paradigmas de programación orientada a objetos, enriqueciendo su competencia técnica y profesional.

Miguel Angel Reyes Moreno

Hace 5 años

Tengo todo separado en distintos archivos: student.js:

export default class Student {
  constructor({
    id,
    name,
    email,
    username,
    points = 0,
    twitter = undefined,
    instagram = undefined,
    facebook = undefined,
    approvedCourses = [],
    learningPaths = [],
  }) {
    this._id = id;
    this._name = name;
    this._email = email;
    this._username = username;
    this._points = points;
    this._approvedCourses = approvedCourses;
    this._learningPaths = learningPaths;
    this._socialMedia = {
      twitter,
      instagram,
      facebook,
    };
  }

  get id () {
    return this._id;
  }

  set id (newID) {
    this._id = newID;
  }

  get name () {
    return this._name;
  }

  set name (newName) {
    this._name = newName;
  }

  get email () {
    return this._email;
  }

  set email (newEmail) {
    this._email = newEmail;
  }

  get points () {
    return this._points;
  }

  set points (newPoints) {
    this._points = newPoints;
  }

  get username () {
    return this._username;
  }

  set username (newUsername) {
    this._username = newUsername;
  }

  get approvedCourses () {
    return this._approvedCourses;
  }

  set approvedCourses (newApprovedCourses) {
    this._approvedCourses = newApprovedCourses;
  }

  get learningPaths () {
    return this._learningPaths;
  }

  set learningPaths (newLearningPaths) {
    this._learningPaths = newLearningPaths;
  }

  /*get _socialMedia () {
    return this._socialMedia;
  }

  set _socialMedia (newSocialMedia) {
    this._socialMedia = newSocialMedia;
  }*/
};

freeStudent.js:

import Student from './student.js'

export default class FreeStudent extends Student {
  constructor(props) {
    super(props) //*Llama al constructor de la clase madre
  }

  approveCourse(newCourse) {
    if (newCourse.isFree){
      this.approvedCourses.push(newCourse)
    } else {
      console.warn(`Lo sentimos ${this.name}, sólo puedes tomar cursos gratis`)
    }
  }
}

basicStudent.js:

import Student from './student.js'

export default class BasicStudent extends Student {
  constructor(props) {
    super(props) //*Llama al constructor de la clase madre
  }

  approveCourse(newCourse) {
    if (newCourse.lang !== "English"){
      this.approvedCourses.push(newCourse)
    } else {
      console.warn(`Lo sentimos ${this.name}, no puedes tomar cursos en inglés`)
    }
  }
}

expertStudent.js

import Student from './student.js'

export default class ExpertStudent extends Student {
  constructor(props) {
    super(props) //*Llama al constructor de la clase madre
  }

  approveCourse(newCourse) {
    this.approvedCourses.push(newCourse)
  }
}

main.js:

import FreeStudent from './freeStudent.js'
import BasicStudent from './basicStudent.js'
import ExpertStudent from './expertStudent.js'

//* Estudiantes ---------------------
const miguel = new ExpertStudent({
  id: 1,
  name: 'Miguel',
  email: 'miguel@gmail.com',
  username: 'mike',
  points: 40000,
  approvedCourses: [cursoProgramacionBasica],
  learningPaths: [escuelaDesarrolloWeb]
});
console.log(miguel);

const juan = new FreeStudent({
  id: 2,
  name: 'Juan',
  email: 'juan@gmail.com',
  username: 'juanDC',
  points:  100000,
})
console.log(juan)
juan.approveCourse(cursoProgramacionBasica)
juan.approveCourse(cursoIntroMarketingDigital)
console.log(juan.approvedCourses)

const daniel = new BasicStudent({
  id: 3,
  name: 'Daniel',
})
console.log(daniel)
daniel.approveCourse(cursoProgramacionBasica)
daniel.approveCourse(cursoIntroMarketingDigital)
console.log(daniel.approvedCourses)

Sebastian Moreno Olivera

Hace 5 años

Esta súper su ejemplo, gracias 😁😁

Segundo Juan

Hace 5 años

y como haces para que lo corra el navegador?

Comentarios (74)74 comentarios

Juan David Sánchez

Andrés Felipe Eslava Zuluaga

Franks Jhon Colque Zegarra

José Gregorio Estrada Meneses

Christian Alvarenga

Luciano Cavallo

Jenny Aguilar

Henry Alexander Velásquez Rosas

Hace 3 años

Yuliani Paoleth Alcántara Galindo

Josemaria Ponce Cajavilca

Cesar Gabriel Mejias Farreras

Pablo Daniel Amé

Jesús Medina

Facundo Esteban Gasco

Juan Castro

Profesor

Orlando Rodriguez

Hace 4 años

Bramucci Candela

Ricardo Alfonso Chavez Vilcapoma

Carlos Eduardo Gomez García

Obed Paz

Jose Flores

Jerremi Aron Chancan Labajos

WILSON TOVAR

Manuel Araujo

Vladimir Farrera Vera

John Osorio

Sergio Antonio Ochoa Martinez

gilberto jose

Hector Maluy Fernandez

Sofía González Chavira

JavaScript Orientado a Objetos

Fundamentos de Programación Orientada a Objetos en JavaScript

Programación Orientada a Objetos con JavaScript: Fundamentos y Aplicaciones

Conceptos Básicos de Programación Orientada a Objetos

Objetos, clases y prototipos

Objetos y prototipos en JavaScript: diferencias y usos

Objetos Literales y Prototipos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Comparativa de Objetos Literales y Clases en JavaScript

Pilares de la POO: abstracción y encapsulamiento

Abstracción en Programación Orientada a Objetos con JavaScript

Programación Orientada a Objetos con JavaScript: Clases y Prototipos

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript

Implementación de Herencia en JavaScript con Clases

Progreso del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

Recursos

Recursos