¿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.
classComment{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.
classStudent{constructor(name, username){this.name= name;this.username= username;}publicarComentario(commentContent){const comment =newComment(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.
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 normalconst juan =newStudent('Juan DC','juandc');juan.publicarComentario('¡Me encantó el curso!');// Instancia de un profesorconst freddy =newTeacherStudent('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!
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)
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 =newPerson(50,90);var employee =newEmployee(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.
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
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:
const freddy =newTeacherStudent({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"))
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.
lo consegui hacer, pero dentro de otro metodo, añadi el metodo publicarComoEstudiante a TeacherStudent, dentro solo esta el llamado con super
Ya solo queda practicar para poder dominar lo aprendido. Muchas gracias por todo.
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.
Para este ejemplo en particular puede que tenga mucho sentido. I like it.
Bueno, creo que es bastante informacion por hoy, pero me encanto todo, de principio a fin el curso estuvo genial :D
Sin necesidad de recibir atributos o propiedades como parámetros en nuestro constructor también podemos crear más atributos
Les dejo una funcionalidad de console que les va a volar la cabeza, la aprendimos en el curso de Node.
Y de esta forma pueden crear bloques de comentarios.
Saludos
ya probaste console.table()?
pruebala con un objeto.
De nada.
Juan reveló que hace falta la opción de editar comentario.
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
si exelente y todo lo que falta ajajja
Les comparto el resumen de cómo implementar OOP en JS:
// prototypes/constructors/moldsclassLearningPath{constructor({ path_name, courses =[],}){this.path_name= path_name; courses;};};classCourse{constructor({ name, classes =[], isFree =false, lang ='spanish',}){this._name= name;this.classes= classes;this.isFree= isFree;this.lang= lang;}getname(){returnthis._name;}setname(newName){if(newName ===''){console.warn('Nombre no válido.');}else{this._name= newName;}}};classComment{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);}}classStudent{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 =newComment({content: commentContent,studentName:this.name,}); comment.publish();}};classClassForCourse{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;}}classPlatziClass{cosntructor({ name, videoId,}){this.name= name;this.videoId= videoId;}reproduce(){videoPlay(this.videoId);}pause(){videoStop(this.videoId);}}classFreeStudentextendsStudent{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.')}};}classBasicStudentextendsStudent{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.')}};}classExpertStudentextendsStudent{constructor(props){super(props);}approveCourse(newCourse){this.approvedCourses.push(newCourse);};}classTeacherStudentextendsStudent{constructor(props){super(props);}approveCourse(newCourse){this.approvedCourses.push(newCourse);};publishComment(commentContent){const comment =newComment({content: commentContent,studentName:this.name,studentrRole:'profesor'}); comment.publish();}}// functionsfunctionvideoPlay(id){const secretUrl ='https://www.google.com/';console.log('Se reproduce desde la url'+ secretUrl);}functionvideoStop(id){const secretUrl ='https://www.medium.com/';console.log('Se detuvo la url'+ secretUrl);}// Course-lessonsconst firstLinecodeLesson =newClassForCourse({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:'',})// coursesconst basicProgrammingCourse =newCourse({name:'Curso de Programación básica',classes:[ firstLinecodeLesson,'¿qué es HTML/CSS/JS?',],isFree:true,})const webIntroCourse =newCourse({name:'Introducción a la Web',classes:['MBienvenido al Desarrollo Web','¿Cómo empezó todo?',]})const pooCourse =newCourse({name:'Curso de POO',classes:['¿Por qué aprender Programación Orientada a Objetos?','¿Qué resuelve la Programación Orientada a Objetos?',],lang:'english',})// gradesconst webDevelopmentGrades =[ basicProgrammingCourse, webIntroCourse, pooCourse,];constExclusiveCoursesGrades=['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',];// Collegesconst pythonDevelopmentCollege =newLearningPath({path_name:'Escuela de Desarrollo en Python',courses: pythonDevGrades,})const webDevelopmentCollege =newLearningPath({path_name:'Escuela de Desarrollo Web',courses: webDevelopmentGrades,});const exclusiveCoursesCollege =newLearningPath({path_name:'Cursos Exclusivos',courses:ExclusiveCoursesGrades,});// studentsconst andres =newFreeStudent({name:'Andrés',username:'altair__6',email:'andres@mail.com',instagram:'altair__6',learningPaths:[ pythonDevelopmentCollege ],})const felipe =newBasicStudent({name:'Felipe',username:'Jaya__9',email:'felipe@mail.com',instagram:'Jaya__9',twitter:'Jaya__9',learningPaths:[ webDevelopmentCollege, exclusiveCoursesCollege ],})const freddy =newTeacherStudent({name:'Freddy Vega',username:'freddier',email:'freddy@mail.com',instagram:'freddiervega',})
En lugar de agregarlo de esta manera en la TeacherStudente Class:
publishCommet(commentContent){const comment =newComment({content: commentContent,studentName:this.name,// 'Profesor' lo cambiamos por this.studentRolestudentRole:'Profesor'// this.studentRole}) comment.publish()}
Mas simple, mejor
Desde la consola del navegador, podemos ver si hay polimorfismo a través de la cadena de prototipos.
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.
13 de julio de 2022 y en JavaScript no aparece en la consola el mencionado
