Cursos Empresas Blog Live Conf Eventos Precios

0:0012:41

Recursos

Resumen

¿Cómo implementar el polimorfismo en JavaScript para gestionar comentarios?

¡Vamos a sumergirnos en la magia del polimorfismo en la programación! En este contenido, te explicaré cómo puedes aplicar polimorfismo para manejar comentarios de manera efectiva con JavaScript, asegurando que tu código sea versátil y expansible. Además, te guiaré a través del proceso de creación de una clase Comment, permitiendo la publicación de comentarios con diferentes roles de usuario. Este enfoque te ayudará a mejorar tus habilidades en la programación orientada a objetos.

¿Cómo definir la clase de comentarios?

Para comenzar, necesitamos definir la clase de comentarios, que será la base para gestionar las publicaciones de los usuarios. Esto implicará definir atributos esenciales y métodos necesarios.

class Comment {
  constructor(content, studentName, studentRole = 'estudiante') {
    this.content = content;
    this.studentName = studentName;
    this.studentRole = studentRole;
    this.likes = 0; // Todos los comentarios inician con 0 likes
  }

  publicar() {
    console.log(`${this.studentName} (${this.studentRole})`);
    console.log(`${this.likes} likes`);
    console.log(this.content);
  }
}

Atributos esenciales:
- content: Obligatorio, ya que cada comentario necesita un contenido.
- studentName: Quién escribió el comentario; también obligatorio.
- studentRole: Rol del usuario, que por defecto es "estudiante".
- likes: Inicialmente cero, pero puede incrementarse más adelante.
Método publicar: Este método muestra el comentario junto con la información del estudiante y la cantidad de "likes".

¿Cómo integrar la clase en otras clases?

Nuestra clase Comment es potente por sí sola, pero se integra aún mejor cuando la usas en combinación con otras clases. Por ejemplo, en una aplicación orientada a estudiantes y profesores, puedes implementar este mecanismo en la clase Student y derivar diferentes roles de estudiante.

class Student {
  constructor(name, username) {
    this.name = name;
    this.username = username;
  }

  publicarComentario(commentContent) {
    const comment = new Comment(commentContent, this.name);
    comment.publicar(); // Llama el método para publicar el comentario
  }
}

Interacción con otras clases: Al crear una instancia de Comment dentro de Student, demostramos polimorfismo, permitiendo que diferentes tipos de estudiantes publiquen comentarios según sus roles y permisos.

¿Cómo manejar roles de usuario de manera efectiva?

Agregar una variedad de roles no solo mejora la flexibilidad del sistema, sino que también te permite personalizar las interacciones de usuario de una manera significativa.

class TeacherStudent extends Student {
  publicarComentario(commentContent) {
    const comment = new Comment(commentContent, this.name, 'profesor');
    comment.publicar();
  }
}

Customización y especialización: Mediante el polimorfismo, puedes especializar la clase Student en una subclase TeacherStudent. Esta colonia de clases permite redefinir cómo se gestionan los comentarios según el rol, en este caso estableciendo el rol por defecto a "profesor".

¿Cómo probar y ajustar nuestro código en un entorno real?

Es vital ejecutar el código en un entorno práctico para asegurarse de que todo funciona correctamente.

Crear instancias y probar métodos:
- Crea instancias de las diferentes clases de estudiante.
- Llama al método publicarComentario para ver cómo se comportan los comentarios.

// Instancia de un estudiante normal
const juan = new Student('Juan DC', 'juandc');
juan.publicarComentario('¡Me encantó el curso!');

// Instancia de un profesor
const freddy = new TeacherStudent('Freddy Vega', 'freddier');
freddy.publicarComentario('Excelente, me encanta esta clase 😃');

Verificar el alcance de los métodos:
- Asegúrate de que el método publicarComentario en TeacherStudent esté sobrescribiendo correctamente y que el rol se muestre como "profesor".

¡Y ahí lo tienes! Con estas estrategias, puedes manejar comentarios en aplicaciones basadas en roles utilizando el poder del polimorfismo en JavaScript. No dudes en seguir practicando e incorporando estos conceptos en tus propios proyectos. ¡La práctica hace al maestro!

Polimorfismo en JavaScript: Crear y Publicar Comentarios

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

Clase 16 / 17

Ver clases

Polimorfismo en JavaScript: Crear y Publicar Comentarios

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

Clase 16 de 17

Clase 16 / 17

Polimorfismo en JavaScript: Crear y Publicar Comentarios

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

Clase 16 / 17

Ver clases

José Gregorio Estrada Meneses#2667621

El polimorfismo es uno de los principios de la programación orientada a objetos (OOP). Es la práctica de diseñar objetos para compartir comportamientos y poder anular los comportamientos compartidos con otros específicos. El polimorfismo se aprovecha de la herencia para que esto suceda.

En OOP se considera que todo está modelado como un objeto. Esta abstracción puede reducirse a tuercas y tornillos para un automóvil, o tan amplia como simplemente un tipo de automóvil con un año, marca y modelo.

Para tener un escenario de automóvil polimórfico sería el tipo de automóvil base, y luego habría subclases que heredarían del automóvil y proporcionarían sus propios comportamientos además de los comportamientos básicos que tendría un automóvil. Por ejemplo, una subclase podría ser TowTruck que aún tendría un año de fabricación y modelo, pero también podría tener algunos comportamientos y propiedades adicionales que podrían ser tan básicos como una bandera para IsTowing tan complicados como los detalles específicos de la elevación.

Volviendo al ejemplo de las personas y los empleados, todos los empleados son personas, pero todas las personas no son empleados. Lo que quiere decir que las personas serán la súper clase y el empleado la subclase. Las personas pueden tener edades y pesos, pero no tienen salarios. Los empleados son personas por lo que inherentemente tendrán una edad y peso, pero también porque son empleados tendrán un salario.

Así que para facilitar esto, primero escribiremos la súper clase (Persona)

function Person(age,weight){
 this.age = age;
 this.weight = weight;
}

Y le daremos a la persona la posibilidad de compartir su información.

Person.prototype.getInfo = function(){
 return "I am " + this.age + " years old " +
    "and weighs " + this.weight +" kilo.";
};

A continuación deseamos tener una subclase de Persona, Empleado.

Comentarios (47)47 comentarios

José Gregorio Estrada Meneses

Hace 5 años

function Employee(age,weight,salary){
 this.age = age;
 this.weight = weight;
 this.salary = salary;
}
Employee.prototype = new Person();

Y anularemos el comportamiento de getInfo definiendo uno que sea más adecuado para un empleado

Employee.prototype.getInfo = function(){
 return "I am " + this.age + " years old " +
    "and weighs " + this.weight +" kilo " +
    "and earns " + this.salary + " dollar.";  
};

Se pueden usar de forma similar a su código original.

var person = new Person(50,90);
var employee = new Employee(43,80,50000);

console.log(person.getInfo());
console.log(employee.getInfo());

Sin embargo, aquí no se gana mucho con la herencia, ya que el constructor de Employee es muy similar al de una persona, y la única función en el prototipo está siendo anulada. El poder en el diseño polimórfico es compartir comportamientos.

Fredy Gutiérrez Vazquez

Hace 3 años

Excelente aporte.

Anfernee Valera

Solo existen dos tipos de personas:

Miguelito ❌
Freddy ✔

Beder Danilo Casa Condori

Hace 2 años

jaja

Anderson Vergara Ruiz

Toma tú bonus

EL PROFE A LOS 13 AÑOS

https://youtu.be/pizgd1wM-LI

Jorge Garcia

jaja noooo.. yo en ese me tiempo me graduaba de ing de sistemas y aun no domino el mismo grado de programacion que este niño que me esta enseñando

Julia Gabriela Nieva Paredes

Hace 4 años

No bueno! Me arrepiento del tiempo perdido a mis 13 años, aunque bueno, a veces no tanto, porque cuando tenía 13 no era tan popular esto de la programación. Es más, cuando estudié la ingeniería en computación, la gente me preguntaba: "y eso , con qué se come?" Ups, ya pueden imaginar mi edad, pero es muy cierto que las nuevas generaciones tienen más oportunidades de aprendizaje en estos días. Antes sólo eran los libros y lo que los maestros te enseñaban en clase, y los libros de programación sólo venían en inglés y era muy difícil conseguirlos. Así que aprovechen y nunca paren de aprender.

Miguel Angel Reyes Moreno

Separado por archivos para tener un mejor mantenimiento y mejor organización:

student.js:

import Comment from './comment.js'
publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name
    })
    comment.publicar()
  }

comment.js:

export default class Comment {
  constructor({
    content,
    studentName,
    studentRole = "Estudiante",
  }){
    this.content = content;
    this.studentName = studentName;
    this.studentRole = studentRole;
    this.likes = 0
  }

  publicar() {
    console.log(`${this.studentName} ( ${this.studentRole} )`)
    console.log(`${this.likes} likes`)
    console.log(`${this.content}`)
  }
}

teacherStudent.js:

import Student from './student.js'
import Comment from './comment.js'

export default class TeacherStudent extends Student {
  constructor(props) {
    super(props)
  }

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

  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: "Professor"
    })
    comment.publicar()
  }
}

main.js:

const freddy = new TeacherStudent({
  name: 'Freddy Vega',
  username: 'freddier',
  email: 'freddy@gmail.com',
  instagram: "freddiervega"
})
console.log(freddy)
console.log(freddy.publicarComentario("Soy el profe y espero que le den 5 estrellas"))

Diego Herrera Prado

Cuando sobre escribimos un método en una clase hija, aún podemos acceder al método de la clase padre/madre. Para esto se hace uso de la palabra reservada super.

Por ejemplo si en el código añadiéramos

super.postComment("Hola");

En un objeto que es instancia de la clase studentTeacher, el rol aparecería como se definió por defecto en la clase que heredó el método.

La Wea Cosmica

lo consegui hacer, pero dentro de otro metodo, añadi el metodo publicarComoEstudiante a TeacherStudent, dentro solo esta el llamado con super

class TeacherStudent extends Student {
    constructor(props){
        super(props)
    }
    approvedCourse(curso){
        this.cursosAprobados.push(curso)
    }
    publicarComentario(comentario){
        const comment = new Comentario({
            nombre: this.nombre,
            texto: comentario,
            studentRole: 'Teacher' 
        })
        comment.publicar()
    }
     publicarComoEstudiante(comentario){
        super.publicarComentario(comentario)
    }

y asi al llamar a

freddy.publicarComoEstudiante('Excelente, el curso')

devuelve como por defecto

Ernán Alexander Velásquez Ramírez

Me gustó el curso, pero no tanto

Jessie Buckland Pérez

Miguelito juzga, no seas como él, sé como Freddy, sé buena gente.

Eliaz Bobadilla

Minuto 8:39, momentos épicos de Platzi 🤣 .

José Luis Encastin Flores

¡Buenísima clase!

Ya solo queda practicar para poder dominar lo aprendido. Muchas gracias por todo.

Henry J. Perez

Una pregunta: No era mejor que la clase TeacherStudent heredara de la clase ExpertStudent? De esa manera no se tenia que copiar el codigo sino directamente heredando.

Juan Castro

Profesor

Para este ejemplo en particular puede que tenga mucho sentido. I like it.

Nicolas ortiz suarez

Bueno, creo que es bastante informacion por hoy, pero me encanto todo, de principio a fin el curso estuvo genial :D

Leobardo Licona Soto

Sin necesidad de recibir atributos o propiedades como parámetros en nuestro constructor también podemos crear más atributos

Migrant Cyborg

Les dejo una funcionalidad de console que les va a volar la cabeza, la aprendimos en el curso de Node.

console.group() console.log('hola') console.log('mundo') console.groupEnd()

Y de esta forma pueden crear bloques de comentarios.

Saludos

Oscar Fuentes Esteves

ya probaste console.table()?

pruebala con un objeto.

De nada.

Pablo Nicolás Alonso

Juan reveló que hace falta la opción de editar comentario.

Dario Paladines

Wao interesante clase y lo que se aprende es un montón, pero este paradigma solo me deja dos lecciones: Creo que hay que practicar demasiado al menos para los que recién empezamos porque aplicando los 4 pilares se puede volver tan complejo mezclando todo además de también entender y profundizar los conceptos, sintaxis, funcionamiento, etc. Y la segunda que definitivamente no es nada conveniente tener todas las clases, objetos, etc en el mismo archivo se vuelve un dolor de cabeza

Franco Lind

si exelente y todo lo que falta ajajja

Andrés Felipe Eslava Zuluaga

Les comparto el resumen de cómo implementar OOP en JS:

// prototypes/constructors/molds
class LearningPath {
  constructor({
    path_name,
    courses = [],
  }) {
    this.path_name = path_name;
    courses;
  };
};
class Course {
  constructor({
    name,
    classes = [],
    isFree = false,
    lang = 'spanish',
  }) {
    this._name = name;
    this.classes = classes;
    this.isFree = isFree;
    this.lang = lang;
  }

  get name() {
    return this._name;
  }
  set name(newName) {
    if (newName === '') {
      console.warn('Nombre no válido.');
    } else {
      this._name = newName;
    }
  }
};
class Comment {
  constructor({
    content,
    studentName, 
    studentrRole = 'estudiante',
  }) {
    this.content = content;
    this.studentName = studentName;
    this.studentrRole = studentrRole;
    this.likes = 0;
  }

  publish() {
    console.log(this.studentName + " (" + this.studentrRole + ")");
    console.log(this.likes + " likes");
    console.log(this.content  );
  }
}
class Student {
  constructor({
    name,
    email,
    username,
    twitter = undefined,
    instagram = undefined,
    facebook = undefined,
    approvedCourses = [],
    learningPaths = [],
  }) {
    this.name = name;
    this.email = email;
    this.approvedCourses = approvedCourses;
    this.learningPaths = learningPaths;
    this.socialMedia = {
      username,
      twitter,
      instagram,
      facebook,
    };
  };

  publishComment(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
    });
    comment.publish();
  }
};
class ClassForCourse {
  constructor({
    name,
    id,
    numberOfClass,
    comments = [
      numComments = 0,
      messages = [],
    ],
    questions = [],
    classResources = [
      links = [],
      text = undefined,
    ],
    nextClass,
    previousClass,
  }) {
    this.name = name;
    this.id = id;
    this.numberOfClass = numberOfClass;
    this.comments = comments;
    this.questions = questions;
    this.classResources = classResources;
    this.nextClass = nextClass;
    this.previousClass = previousClass;

  }
}
class PlatziClass {
  cosntructor({
    name,
    videoId,
  }) {
    this.name = name;
    this.videoId = videoId;
  }

  reproduce() {
    videoPlay(this.videoId);
  }
  pause() {
    videoStop(this.videoId);
  }
}
class FreeStudent extends Student {
  constructor(props) {
    super(props);
  };

  approveCourse(newCourse) {
    if(newCourse.isFree) {
      this.approvedCourses.push(newCourse);
    } else {
      console.warn('Lo sentimos ' + this.name + ', solo puedes tomar cursos abiertos o gratis.')
    }
  };
}
class BasicStudent extends Student {
  constructor(props) {
    super(props);
  };

  approveCourse(newCourse) {
    if(newCourse.lang !== 'english') {
      this.approvedCourses.push(newCourse);
    } else {
      console.warn('Lo sentimos ' + this.name + ', solo puedes tomar cursos en español.')
    }
  };
}
class ExpertStudent extends Student {
  constructor(props) {
    super(props);
  }

  approveCourse(newCourse) {
    this.approvedCourses.push(newCourse);
  };
}
class TeacherStudent extends Student {
  constructor(props) {
    super(props);
  }

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

  publishComment(commentContent) {
    const comment = new Comment({
     content: commentContent,
     studentName: this.name,
     studentrRole: 'profesor'
   });
   comment.publish();
 }
}

// functions
function videoPlay(id) {
  const secretUrl = 'https://www.google.com/';
  console.log('Se reproduce desde la url' + secretUrl);
}
function videoStop(id) {
  const secretUrl = 'https://www.medium.com/';
  console.log('Se detuvo la url' + secretUrl);
}

// Course-lessons
const firstLinecodeLesson = new ClassForCourse({
  name: 'Mi primera línea de código',
  id: 'BPCC1',
  numberOfClass: 1,
  comments: [
    numComments = 16,
    messages = [],
  ],
  questions: [],
  classResources: [
    links = [],
    text = 'lorem ipsum in dolor sit amet',
  ],
  nextClass: '¿qué es HTML/CSS/JS?',
  previousClass: '',
})

// courses
const basicProgrammingCourse = new Course({
  name: 'Curso de Programación básica',
  classes: [
    firstLinecodeLesson,
    '¿qué es HTML/CSS/JS?',
  ],
  isFree: true,
})
const webIntroCourse = new Course({
  name: 'Introducción a la Web',
  classes: [
    'MBienvenido al Desarrollo Web',
    '¿Cómo empezó todo?',
  ]
})
const pooCourse = new Course({
  name: 'Curso de POO',
  classes: [
  '¿Por qué aprender Programación Orientada a Objetos?',
  '¿Qué resuelve la Programación Orientada a Objetos?',
  ],
  lang: 'english',
})

// grades
const webDevelopmentGrades = [
  basicProgrammingCourse,
  webIntroCourse,
  pooCourse,
];
const ExclusiveCoursesGrades = [
  'Cómo Conseguir Trabajo en Programación',
  'Curso de Finanzas para Startups',
  'Curso de Inglés Técnico para Profesionales'
];
const pythonDevGrades = [
  basicProgrammingCourse,
  webIntroCourse,
  pooCourse,
  'Curso de Fundamentos de Web Scraping con Python y Xpath',
  'Curso de Introducción al Pensamiento Computacional con Python',
];

// Colleges
const pythonDevelopmentCollege = new LearningPath({
  path_name: 'Escuela de Desarrollo en Python',
  courses: pythonDevGrades,
})
const webDevelopmentCollege = new LearningPath({
  path_name: 'Escuela de Desarrollo Web',
  courses: webDevelopmentGrades,
});
const exclusiveCoursesCollege = new LearningPath({
  path_name: 'Cursos Exclusivos', 
  courses: ExclusiveCoursesGrades,
});

// students
const andres = new FreeStudent({
  name :'Andrés',
  username: 'altair__6',
  email: 'andres@mail.com',
  instagram: 'altair__6',
  learningPaths: [ pythonDevelopmentCollege ],
})
const felipe = new BasicStudent({
  name :'Felipe',
  username: 'Jaya__9',
  email: 'felipe@mail.com',
  instagram: 'Jaya__9',
  twitter: 'Jaya__9',
  learningPaths: [ webDevelopmentCollege, exclusiveCoursesCollege ],
})
const freddy = new TeacherStudent({
  name: 'Freddy Vega',
  username: 'freddier',
  email: 'freddy@mail.com',
  instagram: 'freddiervega',
})

EXPLICACIÓN DEL CODIGO

Agregue al constructor de la class Student:

constructor ({
 studentRole = 'estudiante'
}) {
 this.studentRole = studentRole;
}

Y agregue el atibuto studentRole directamente al objeto de freddy :

const freddy = new TeacherStudent({
    name: 'Freddy',
    lastName: 'Vega',
    userName: 'freddier',
    studentRole: 'Profesor',
    twiter: 'freddier'
});

En lugar de agregarlo de esta manera en la TeacherStudente Class:

publishCommet(commentContent){
        const comment = new Comment ({
            content : commentContent,
            studentName: this.name,
		// 'Profesor' lo cambiamos por this.studentRole
            studentRole:  'Profesor' // this.studentRole
        })
        comment.publish()
    }

Reinaldo Mendoza

Mas simple, mejor

Hector Maluy Fernandez

Desde la consola del navegador, podemos ver si hay polimorfismo a través de la cadena de prototipos.

Carlos Contreras

Me encanta la energía del profesor a través de todo el curso. Pero me causó especial gracia ver en esta clase como hizo un comentario de Freddy diciendo "este curso es excelente", remarcando que es el mejor comentario que le podrían hacer.

Rubén Ernesto Aragón Gil

13 de julio de 2022 y en JavaScript no aparece en la consola el mencionado

__proto__

si no,

[[Prototype]]

Pero sí funciona compañero.

Recursos

Resumen

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Polimorfismo en JavaScript: Crear y Publicar Comentarios

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

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Recursos

Resumen

¿Cómo implementar el polimorfismo en JavaScript para gestionar comentarios?

¿Cómo definir la clase de comentarios?

¿Cómo integrar la clase en otras clases?

¿Cómo manejar roles de usuario de manera efectiva?

¿Cómo probar y ajustar nuestro código en un entorno real?

Comentarios

Recursos

Resumen

¿Cómo implementar el polimorfismo en JavaScript para gestionar comentarios?

¿Cómo definir la clase de comentarios?

¿Cómo integrar la clase en otras clases?

¿Cómo manejar roles de usuario de manera efectiva?

¿Cómo probar y ajustar nuestro código en un entorno real?

Comentarios