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

Clase 10 de 20 • 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

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

Tomar examen

Resumen

¿Cómo se crean clases en JavaScript usando la sintaxis de ES6?

La programación orientada a objetos (POO) nos permite crear arquitecturas de software organizadas y eficientes. Al usar la sintaxis de clases en JavaScript, podemos crear prototipos reutilizables y jerárquicos que mejoran el mantenimiento y escalabilidad de nuestro código. Exploremos cómo se crea una clase básica utilizando ES6, centrándonos en un sistema de aprendizaje.

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

Una clase en JavaScript es un modelo o "plantilla" para crear objetos con propiedades y métodos compartidos. Se define usando la palabra clave class seguida del nombre de la clase. Las clases pueden contener un constructor, que inicializa objetos a partir de la clase y define las propiedades básicas que necesitarán.

class LearningPath {
  constructor({ name = '', courses = [] }) {
    this.name = name;
    this.courses = courses;
  }
}

¿Cómo se crean instancias de una clase?

Después de definir nuestra clase, podemos crear instancias que representen entidades individuales. Al crear una instancia, pasamos las propiedades necesarias en el formato de objeto. Esto permite establecer atributos específicos para cada instanciación.

const webDevelopmentSchool = new LearningPath({
  name: 'Escuela de Desarrollo Web',
  courses: [
    'Curso Definitivo de HTML y CSS',
    'Curso Práctico de HTML y CSS',
  ],
});

¿Cómo organizar mejor los programas con POO?

Un aspecto importante de la programación orientada a objetos es evitar la repetición de código. Esto se logra abstrayendo elementos comunes en clases y utilizando instancias. En nuestro ejemplo de sistema de aprendizaje, los cursos y las clases son ejemplos claros donde la abstracción puede optimizar nuestro código.

Definiendo una clase Curso

En este sistema, los cursos pueden tener múltiples clases. Creamos una clase Course con un constructor que acepta un objeto para definir propiedades como el nombre y las clases incluidas.

class Course {
  constructor({ name, classes = [] }) {
    this.name = name;
    this.classes = classes;
  }
}

const basicProgrammingCourse = new Course({
  name: 'Curso Gratis de Programación Básica',
});

Reutilizando objetos en distintas instancias

Al reutilizar instancias de .Course en diferentes LearningPath, evitamos redundar nombres de cursos y simplificamos su mantenimiento. Si un curso necesita modificarse, solo lo hacemos en un lugar.

const dataScienceSchool = new LearningPath({
  name: 'Escuela de Data Science',
  courses: [
    basicProgrammingCourse,
    new Course({ name: 'Curso de Data Business' }),
  ],
});

¿Qué aprender a continuación?

La programación orientada a objetos es vastamente poderosa, y es solo la punta del iceberg. Considere crear más abstracciones para otros elementos como "Comentarios" o "Bloques de contenido" en su aplicación. ¿Qué otras clases crees que necesitarías en una plataforma de aprendizaje como la que estamos construyendo? Desafíate a crear estas clases y convierte tu código en una obra de arte POO.

Recuerda: cada vez que simplificas, reutilizas y organizas tu código, te conviertes en un mejor programador. ¡Sigue mejorando y feliz codificación!

Miguel Angel Reyes Moreno

student•

Creo que se habrán dado cuenta de que tener todo este código en 1 archivo es ineficiente. Así que por ahora, creé diferentes archivos y los estoy mandado a llamar en el main.js :D Por cierto, para que esto funcione, tienen que hacer este ajuste en index.html: <script src="main.js" type="module"></script>

main.js:

import Teacher from './teacher.js'
import Course from './course.js'
import Lesson from './lesson.js'
import LearningPath from './learningPath.js'
import Student from './student.js'


//* Teachers ---------------------
const FreddyVega = new Teacher({
  id: 1,
  name: 'Freddy Vega',
  speciality: 'CEO',
});
console.log(FreddyVega);

const ClauAlderete = new Teacher({
  id: 2,
  name: 'Clau Alderete',
  speciality: 'Digital Marketing',
});
console.log(ClauAlderete);


//* Lecciones -----------------------
const lesson1PB = new Lesson({
  id: 1,
  title: 'Clase 1 Programación Básica',
});
console.log(lesson1PB);

const lesson1DM = new Lesson({
  id: 2,
  title: 'Clase 1 Marketing Digital',
});
console.log(lesson1DM);


//* Cursos ----------------------------
const cursoProgramacionBasica = new Course({
  id: 1,
  name: "Curso gratis de programación básica",
  classes: [lesson1PB],
  teacher: FreddyVega,
});
console.log(cursoProgramacionBasica);

const cursoIntroMarketingDigital = new Course({
  id: 2,
  name: 'Curso de Introducción al Marketing Digital',
  classes: [lesson1DM],
  teacher: ClauAlderete
});
console.log(cursoIntroMarketingDigital);


//* Escuelas ---------------------
const escuelaDesarrolloWeb = new LearningPath({
  id: 1,
  title: 'Escuela de Desarrollo Web',
  courses: [cursoProgramacionBasica],
});
console.log(escuelaDesarrolloWeb);

const escuelaMarketingDigital = new LearningPath({
  id: 2,
  title: 'Marketing Digital',
  courses: [cursoIntroMarketingDigital],
});
console.log(escuelaMarketingDigital);


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

Teacher.js:

export default class Teacher {
  constructor({
    id,
    name,
    speciality,
  }) {
    this.id = id;
    this.name = name;
    this.speciality = speciality;
  }
};

Lecciones:

export default class Lesson {
  constructor({
    id,
    title,
  }){
    this.id = id;
    this.title = title;
  };
};

Cursos:

export default class Course {
  constructor({
    id,
    name,
    classes = [],
    teacher,
  }){
    this.id = id;
    this.name = name;
    this.classes = classes;
    this.teacher = teacher;
  };
}

Escuelas:

export default class LearningPath {
  constructor({
    id,
    title,
    courses = [],
  }) {
    this.id = id;
    this.title = title;
    this.courses = courses;
    this.coursesQuantity = courses.length;
  }
};

Estudiantes:

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,
    };
  }
};

Juan Castro

teacher•

Me encanta ese orden.

Honestamente, trabajar todas las clases en un solo archivo es desesperante. Sobre todo estando tan acostumbrado a los módulos.

Pero en toda nuestra experiencia nos hemos dado cuenta que trabajar en tantos diferentes archivos impacta muy negativamente a estudiantes que recién están iniciando.

De hecho, recuerdo que en el curso de frameworks y librerías de JS mencionaste que el usar tantos archivos fue uno de los puntos que no te convencieron tanto de React.js.

Por eso, aunque en este curso aprendemos a usar los módulos para aplicar encapsulamiento a nivel de archivos, postergamos el uso de módulos más "seriamente" dentro del proyecto para el curso práctico de POO en JS (próximo a grabar).

Miguel Angel Reyes Moreno

student•

Qué memoria tan buena tienes Juan 😅 ese Miguel del pasado no estaba acostumbrado a React y ahora tengo mi página web hecha React y todo está muy separado en varios archivos justamente por la facilidad de mantener el código. Y cuando salga ese curso práctico de POO en JS créeme que estaré aquí comentando mis aportes :D

Franks Jhon Colque Zegarra

Herwing Eduardo Vázquez Macías

Hector Rubio

José Alberto Ramírez Quiroz

Omar Barragán moreno

kevin diaz

Fernando Rocha Olivera

Dario Paladines

Kevin Acevedo

Eduardo Andrés Mejías Azuaje

Henry Alexander Velásquez Rosas

Ricardo Porfirio León Valencia

Andrés Felipe Eslava Zuluaga

Jeremy Medina

Rubén Ernesto Aragón Gil

Sergio Javier Lopez Olivera

Carlos Ponce

Leonardo Gabriel Puebla

Gabriel Hernández Valdez

Cesar Gabriel Mejias Farreras

Daniela Stornelli

Natalia Gallego Heras

Pedro Alvarado Garcia

Henry J. Perez

Mateo Gonzalez

Red Robles

David Estiven Aragón Andrade

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

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

Playgrounds: Manejo de clases

Pilares de la POO: abstracción y encapsulamiento

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