Playgrounds: Sobrescribir métodos heredados

Clase 19 de 20 • Curso Básico de Programación Orientada a Objetos con JavaScript

Gonzalo Gutiérrez Castillo

student•

Mi solución, solo use template literals y el metodo join(). Aprendí mucho en este curso.

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student{
  constructor(props, skills=[]) {
    super(props);
    this.skills = skills;
  }
  publicarComentario(commentContent) {   
    const role = `profesor de ${this.skills.join(",")}`;
    //console.log(role);
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: role
    });
    return comment.publicar();
  }
}

Jason Steven Méndez Balambá

student•

Yo aprendí leyendo este ejemplo. Grax.

silfredo mario

student•

Este es mi aporte. Nota: Tengan cuidado cuando escriban el studentRole, porque el editor solo recibe profesor de, si le colocas otra cosa como, yo soy profesor de, te lo tacha como malo.

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student{

  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }

  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: `profesor de ${this.skills.join()}`
    });
    return comment.publicar();
  }
<code>

Alonso Morante

student•

Algunos enunciados de las guías no se pueden ver por completo. Tendría que haber un scroll horizontal.

Juan Castro

teacher•

Creo que ya quedó resuelto, Alonso. ¿Podrías revisar nuevamente por favor?

Chema F

student•

Hola JuanDC, a día 13/01/2023 aun no se puede ver por completo.

Marlón Andrés Cuartas Aguirre

student•

Hector Maluy Fernandez

student•

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }
  approveCourse(newCourse) {
    this.approvedCourses.push(newCourse);
  }
  publicarComentario(commentContent) {
    let skills = "profesor de " + this.skills.join(",");
    const comment = new Comment({ content: commentContent, studentName: this.name, studentRole: skills });
    return comment.publicar();
  }
}

Santiago Andres Alvarez Cuadros

student•

Adjunto mi solución . . . . . . . .

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  // Tu código aquí 👈
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }

  publicarComentario(commentContent) {
    const comment = new Comment({
      studentRole: `profesor de ${this.skills}`,
      content: commentContent,
      studentName: this.name,
    });
    return comment.publicar();
  }
}

Alvaro Eduardo Garzón Pira

student•

¡Hola! Queriendo contemplar el escenario de instanciar estudiantes y profesores de la clase madre, modifiqué para uso personal la clase Comment, quedando de la siguiente forma:

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

    publicar() {
        // let comentario = {
        //     studentName: this.studentName + " (" + this.studentRole + ")",
        //     likes: this.likes + " likes",
        //     content: this.content,
        // };
        let comentario = {};
        if (this.studentRole === "estudiante") {
            comentario = {
                studentName: this.studentName + " (" + this.studentRole + ")",
                likes: this.likes + " likes",
                content: this.content,
            };
        } else {
            comentario = {
                studentName:
                    this.studentName + " (profesor de " + this.studentRole + ")",
                likes: this.likes + " likes",
                content: this.content,
            };
        }
        return comentario;
    }
}

La clase Teacher Student

export class TeacherStudent extends Student {
    constructor(props, skills = []) {
        super(props);
        this.skills = skills;
    }
    publicarComentario(commentContent) {
        const comment = new Comment({
            content: commentContent,
            studentName: this.name,
            studentRole: this.skills,
        });
        return comment.publicar();
    }
}

Y a la clase que debemos crear de TeacherStudent se envían las habilidades ya con el .join():

const skills = ["js", "python", "mongodb"];
const props = {
    name: "Erik Ochoa",
    username: "elyager",
};
const profesor = new TeacherStudent(props, skills.join());
console.log(profesor.publicarComentario("Mi primer comentario"));

Espero que te sea de útilidad.

Santiago Andres Alvarez Cuadros

student•

El ejercicio está bien en el sentido de que llega a la respuesta correcta. Sin embargo, te recomiendo leer acerca de los principios SOLID de la programación orientada a objetos (POO), que son reglas y buenas prácticas para crear clases en la POO. . A grosso modo, son cinco principios y SOLID son las siglas de cada uno. Justamente, tu solución estaría violando el segundo principio, conocido como 'Open/closed principle' o 'Principio de apertura/cierre' en español. En pocas palabras, nos dice que las clases deben estar abiertas a la extensión y cerradas a la modificación.. . Qué quiere decir esto exactamente con tu código? Imagina que ahora queremos crear una clase nueva llamada Tutor que extienda de Student porque necesita exactamente las mismas propiedades pero en los comentarios queremos que salga con un tag que diga tutor de la escuela de desarrollo web. Si usamos tu código, tendríamos que modificar directamente la clase Comment porque ahora debemos validar que, si el studentRol es 'tutor', entonces nos arroje prácticamente el mismo código pero con una muy pequeña modificación en studentName. . El código está bien en el sentido de que cumple con lo que se necesita, pero es poco escalable y mantenible, y esto es justamente lo que queremos evitar a medida que vamos creando aplicaciones más grandes y complejas. Puedes revisar mi solución donde verás que modifico el método publicarComentario dentro de la clase TeacherStudent sin modificar la lógica interna de la clase Comment. . No te preocupes si al principio todo esto suena raro, yo al principio no entendía nada de SOLID pero ya después de practicar un poco ya todo empezaba a tener más sentido.

Alvaro Eduardo Garzón Pira

student•

¡Hola Santiago, muchas gracias! Los principios SOLID es algo que llevo aplazando de estudiar y profundizar desde un tiempo atrás, ¡muchas gracias por tu retroalimentación y sugerencia!

Nicolas Godinez Ramirez

student•

Tuve que ver mas de mil veces las clases pero lo logre sin ver la solución, les comparto el código:

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  constructor(props, skills) {
    super(props);
    this.skills = skills
  }

  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: "profesor de " + this.skills
    });
    return comment.publicar();
  }
}

Jaime Alberto Parra Acevedo

student•

Este es mi aporte

import { Comment } from "./Comment";
import { Student } from "./Student";


export class TeacherStudent extends Student {

  constructor(props, skills = []) {
    super(props);

    this.skills = skills;

  }
  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: `${this.name}`,
      studentRole: `profesor de ${this.skills.join(',')}`
    });
    return comment.publicar();
  }
}

Ivan Pérez Arencibia

student•

Solución

export class TeacherStudent extends Student {
  // Tu código aquí 👈
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }

  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: "profesor de " + this.skills.join()
    })
    return comment.publicar();
  }
}

JUAN JOSE HERNANDEZ MUÑOZ

student•

Este es mi aporte, lo hice haciendo manejo de strings con el metodo concat(), aunque viendo los comentarios me di ceutna de que era mas sencillo haciendolo con join()

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student{
  constructor(props, skills=[]) { 
    super(props)
    this.skills = skills
  }
  publicarComentario(commentContent) {
      let nuevoTexto = ''
    for (let i = 0; i < this.skills.length; i++) { 
      if (i == 0) {
        nuevoTexto = nuevoTexto.concat('', this.skills[i])
      } else {nuevoTexto = nuevoTexto.concat(',', this.skills[i])}
    }
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: `profesor de ${nuevoTexto}`
    });
    return comment.publicar();
  }
}

Andrés Schuster

student•

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student { // Define una nueva clase TeacherStudent que hereda de Student
  constructor(props, skills = []) { // Define un constructor que toma un objeto de props y un array opcional de skills
    super(props); // Llama al constructor de la clase base (Student) con props
    this.skills = skills; // Inicializa la propiedad skills de la instancia con el valor de skills pasado como argumento
  }

  publicarComentario(commentContent) { // Define un nuevo método publicarComentario
    const comment = new Comment({ // Crea una nueva instancia de Comment con las siguientes propiedades
      content: commentContent, // El contenido del comentario se establece en el argumento commentContent
      studentName: this.name, // El nombre del estudiante es el nombre de la instancia TeacherStudent
      studentRole: "profesor de " + this.skills.join(","), // El rol del estudiante se establece en "profesor de skill1,skill2,..."
    });
    return comment.publicar(); // Llama al método publicar de la instancia de Comment y devuelve el resultado
  }
}

En resumen, la clase TeacherStudent extiende la clase Student y añade una propiedad skills y un método publicarComentario que crea una nueva instancia de Comment con la información del estudiante y los skills y lo publica.

Alberth Michael Apaza Apaza

student•

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student{
  // Tu código aquí 👈
  constructor(atributies, skills = []) {
    super(atributies);
    this.skills = skills;

  }

  publicarComentario(commentContent) {
    const comment  = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: `profesor de ${this.skills.join(",")}` ,

    });
    return comment.publicar();
  }
}```

Lucas Brumatti

student•

Buenas, estoy tratando de correr las pruebas pero por alguna razón que desconozco no me salta ningún error ni nada en el apartado de pruebas. Además, no me deja clickear el boton correr pruebas de vuelta.

Erik Elyager

student•

Hola Lucas, por favor vuelve a probar porque acabo de hacer el ejercicio y no encontré ningún problema. Tal vez fue glitch del momento. Una disculpa, seguro ya funciona.

Platzi Team

student•

He aquí mi codigo:

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  // Tu código aquí 👈
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
    this.studentRole = 'profesor';
  }
  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: this.studentRole + " de " + this.skills.join(","),
      skills: this.skills,
    });
    console.log(comment);
    return comment.publicar();
  }
}

Harold Zurita Simon

student•

Solución… 😄 . . . .

. .

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }

  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: `profesor de ${this.skills.join()}`,
    });
    return comment.publicar();
  }
}

Eduardo Daniel Esqueda Esquivel

student•

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  // Tu código aquí 👈
  constructor(skills = [], props) {
    this.skills = skills;
    super(props);
  }

  publicarComentario() {
    const comentario = new Comment({
      content: content,
      studentName: this.name,
      studentRole: "profesor de " + this.skills
    })
    return Comment.publicar();
  }
}

PROSPERiA SALUD 3

student••

Esta es mi solución

import { Comment } from "./Comment";
import { Student } from "./Student";

export class TeacherStudent extends Student {
  // Tu código aquí 👈
  constructor(props, skills = []) {
    super(props);
    this.skills = skills;
  }

  publicarComentario(commentContent) {

    const skillsString = this.skills.join(',');
    const studentRole = `profesor de ${skillsString}`;
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: studentRole, 
    });
    return comment.publicar();
  }
}

Natalia Gallego Heras

student•

🤡 Llevo dos días atrapada aquí porque no vi el sistema de archivos y pensé claramente que los compañeros resolvían el playground mediante: 🔥 brujería. Aquí dejo la brujería:

Arriba 👆🏻
👉🏻 En el título de: Sobreescribir métodos heredados
Debajo 👇🏻
Clicando en Comment.js, Student.js o exercise.js 👈🏻

PROSPERiA SALUD 3

student•

Obrigada

Eder Raúl Abarca Raviela

student•

Buenas noches, me sale este error en la clase:

Application error: a client-side exception has occurred (see the browser console for more information).

Eder Raúl Abarca Raviela

student•

Ya probé en los navegadores de firefox y en Chrome y me sigue apareciendo el mismo mensaje...

Eder Raúl Abarca Raviela

student•

Ya funciona, solo que es muy lento para correr la prueba del código.