No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Polimorfismo en JavaScript

18/20
Recursos

Aportes 38

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

Solo existen dos tipos de personas:

  • Miguelito 鉂
  • Freddy 鉁

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: '[email protected]',
  instagram: "freddiervega"
})
console.log(freddy)
console.log(freddy.publicarComentario("Soy el profe y espero que le den 5 estrellas"))

Toma t煤 bonus

EL PROFE A LOS 13 A脩OS

https://youtu.be/pizgd1wM-LI

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.

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

Me gust贸 el curso, pero no tanto

Minuto 8:39, momentos 茅picos de Platzi 馃ぃ .

隆Buen铆sima clase!

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

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

console.group()
console.log(鈥榟ola鈥)
console.log(鈥榤undo鈥)
console.groupEnd()

Y de esta forma pueden crear bloques de comentarios.

Saludos

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

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

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

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

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

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: '[email protected]',
  instagram: 'altair__6',
  learningPaths: [ pythonDevelopmentCollege ],
})
const felipe = new BasicStudent({
  name :'Felipe',
  username: 'Jaya__9',
  email: '[email protected]',
  instagram: 'Jaya__9',
  twitter: 'Jaya__9',
  learningPaths: [ webDevelopmentCollege, exclusiveCoursesCollege ],
})
const freddy = new TeacherStudent({
  name: 'Freddy Vega',
  username: 'freddier',
  email: '[email protected]',
  instagram: 'freddiervega',
})

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

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

__proto__

si no,

[[Prototype]]

Bune dia campeon, Increible curso鈥

dudas, porsupuesto que si, en la parte de herencia, De entrada

const katherine = new FreeStudent({
  name: "Katherine Scotty",
  userName: "Scotty",
  email: "[email protected]",
  twitter: "@Kathe",
  approvedCourses: [
    cursoProgramacionBasica,
  ],
});

console.log(katherine)
katherine.approvedCourses(cursoBasicAlgoritmosPensamientoLogic);
katherine.postComment("Excelente curso, pero me hubiera gustado que es profesor aplicara los modulos cada uno de los prototipos de clases.");
katherine.giveLike()> 

Vista en marcador verde, con metodo鈥

//Herencia
export class FreeStudent extends Student {
  constructor(properties){
    super(properties);
  };
  //metodo
  approvedCourses(newCourse){
    if(newCourse.isFree) {
      this.approvedCourses.push(newCourse);
    } else {
      const message = `Lo sentimos ${this.name} solo puedes acceder cursos gratis`
      console.warn(message);
    }
  };
};

luego, Vista en marcador verde, cuando se define como function 鈥

//Herencia
export class FreeStudent extends Student {
  constructor(properties){
    super(properties);
  };
  //function
  approvedCourses = function(newCourse){
    if(newCourse.isFree) {
      this.approvedCourses.push(newCourse);
    } else {
      const message = `Lo sentimos ${this.name} solo puedes acceder cursos gratis`
      console.warn(message);
    }
  };
};

Ok, por que sucede eso?.

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 鈥渆ste curso es excelente鈥, remarcando que es el mejor comentario que le podr铆an hacer.

隆Aqu铆 este ejemplo de polimorfismo que encontr茅!

class Animal {
  hacerSonido() {
    console.log('Haciendo sonido gen茅rico de animal');
  }
}

class Perro extends Animal {
  hacerSonido() {
    console.log('Guau!');
  }
}

class Gato extends Animal {
  hacerSonido() {
    console.log('Miau!');
  }
}

Que se帽or curso!
Todo clarito como el agua!
Junto al profe Juan de Pildoras Inform谩ticas y FAZT de Youtube eres el mejor ense帽ando Juan!

Un saludo de un Juan Xd

Veo que el profe responde preguntas.
Es la 1ra vez en a帽os que veo esto.
De movida 5 estrellas a este curso!!!

Para esta clase, trate de hacer otro ejemplo, pero con enemigos ( casi como los de Mario ).
Espero que les pueda ayudar en algo.

class Enemigo{
    constructor({
        nombre,
        tipo,
        da帽o = 20
    }){
        this.nombre = nombre;
        this.tipo = tipo;
        this.da帽o = da帽o;
    }

    atacar(){
        console.log(`El enemigo ${this.name} quit贸 ${this.da帽o} HP`);
    }
}

class Hongo extends Enemigo{
    constructor(){
        super({
            nombre: "hongo",
            tipo: "tierra",
            da帽o: 10
        });
    }

    atacar(){
        console.log(`El enemigo ${this.name}, de tipo ${this.tipo} quit贸 ${this.da帽o} HP`);
    }
}

class Fantasma extends Enemigo{
    constructor(){
        super({
            nombre: "Fantasma",
            tipo: "Aire",
            da帽o: 30
        });
    }

    atacar(){
        console.log(`El enemigo ${this.name}, es de tipo ${this.tipo} quit贸 ${this.da帽o} HP. AUCH!`);
    }
}

Cuando entr茅 a la U y tuve mi curso de POO no me explicaron bien el polimorfismo, sin embargo, para realizar un ejemplo del mismo tuve que investigar de que trataba y lo que m谩s me sirvi贸 fue su definici贸n biol贸gica, b谩sicamente dice que un ser vivo que pertenezca a una misma especie podr铆a tener un comportamiento o reacci贸n distinta a sus iguales.
Tras ver ello hice un peque帽o ejercicio en Java que me gustar铆a dejar como reto:
Supongamos que tenemos unas figuras geom茅tricas, triangulo, cuadrado, rect谩ngulo, realizar las clases necesarias para sacar sus propiedades como 谩rea y per铆metro y un m茅todo para dibujar dicho contorno de cada figura (solamente contorno, no su relleno).

en el minuto 7:59 vemos y apredemos a crear a freddy jeje

muchos conceptos que no tenia tan claros gracias
"Me reporta Freddy que escribi mal su nombre ajajjajajajaja"

Y con esta clase estoy seguro que hasta el momento no he aplicado polimorfismo, bueno si quitamos el ejemplo pr谩ctico de la clase

Y el m茅todo de Editar Comentario? 馃く

Mi comentario: Excelente curso!

鈥淎ntes de comentarlo al final despues del examen鈥, me encat贸 este curso, entend铆 muchas cosas m谩s de JS.
siento que ahora tengo un nuevo super poder y se llama JS

Angela Gossow dice:

No se, pero yo le har铆a caso鈥

Bueno, Juan dice que los comentarios se deben poder editar, pero yo no veo ning煤n bot贸n de editar cuando publico un comentario. Ojal谩 a帽adieran ese metodo.

Polimorfismo es cambiar el comportamiento de las propiedades y m茅todos heredados de la clase padre. Para ello se debe colocar el mismo m茅todo en la clase hija, pero el contenido variara seg煤n el contexto de cada una.

Ejemplo

class Student{
	constructor({...}){...}
	addComment(){
		console.log("Soy un estudiante");
	}
}

class TeacherStudent extends Student {
	constructor({...}){...}
	addComment(){ //mismo nombre del m茅todo de la clase padre
		console.log("Soy un profesor");
	}
}

Viendo la clase se ve f谩cil pero en la pr谩ctica todo cambia 馃槮

Estos pilares son: abstracci贸n, encapsulamiento, herencia y polimorfismo.

![](