Anfernee Valera
Solo existen dos tipos de personas:
- Miguelito ❌
- Freddy ✔
Beder Danilo Casa Condori
jaja
¿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 } }
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(); } }
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.
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 😃');
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!
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.
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.
Anfernee Valera
Solo existen dos tipos de personas:
Beder Danilo Casa Condori
jaja
Anderson Vergara Ruiz
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
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.
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
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
ProfesorPara 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
Leobardo Licona Soto
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]]
Hector Maluy Fernandez
Pero sí funciona compañero.
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
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() }