Playgrounds: Sobrescribir métodos heredados

Cursos Empresas Blog Live Conf Precios

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

Playgrounds: Sobrescribir métodos heredados

Comentarios

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();
  }
}```

santiago Miranda

student

Mi solución:

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

export class TeacherStudent extends Student {
  constructor(porps, skills = []) {
    super(porps);
    this.skills = skills;
  }
  publicarComentario(commentContent) {
    const comment = new Comment({
      content: commentContent,
      studentName: this.name,
      studentRole: `profesor de ${this.skills}`
    });
    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();
  }
}

John Rodriguez Durán

student

Esta fue mi solución muchachos

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

export class TeacherStudent extends Student {

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

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

}

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.

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();
  }
}

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> 

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();
  }
}

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();
  }
}

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

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();
    }
}

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"));

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();
  }
}

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();
  }
}

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();
  }
}

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();
  }
}

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

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();
  }
}```

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

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

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();
  }
}

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();
  }
}

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();
  }
}

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

export class TeacherStudent extends Student {

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

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

}

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

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

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Playgrounds: Controlar accesos con get y set

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Playgrounds: Sobrescribir métodos heredados

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript