Polimorfismo en JavaScript

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 ✔

Toma tú bonus

EL PROFE A LOS 13 AÑOS

https://youtu.be/pizgd1wM-LI

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

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.

Me gustó el curso, pero no tanto

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

Minuto 8:39, momentos épicos de Platzi 🤣 .

¡Buenísima clase!

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

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

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.

console.group()
console.log(‘hola’)
console.log(‘mundo’)
console.groupEnd()

Y de esta forma pueden crear bloques de comentarios.

Saludos

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

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',
})

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

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

__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?.

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

“Antes 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

Mi comentario: Excelente curso!

¡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

Tipos de polimorfismo

1. Sobrecarga

Capacidad de un método de tener el mismo nombre con diferentes parámetros, lo que permite realizar diferentes acciones en función de lo argumentos que se les pasen.

def calcularArea(lado): # Para cuadrados
  return lado * lado

def calcularArea(base, altura): # Para rectángulos
  return base * altura

def calcularArea(radio): # Para círculos
  return 3.1415 * radio ** 2

.
.

2. Paramétrico

Capacidad de un método para trabajar con diferentes tipos de datos sin necesidad de ser modificada.

def calcularLongitud(secuencia):
  longitud = 0
  for elemento in secuencia:
    longitud += 1
  return longitud

# Calcula la longitud de una lista
lista = [1, 2, 3, 4, 5]
longitud = calcularLongitud(lista)
print(f"La longitud de la lista es: {longitud}")

# Calcula la longitud de una cadena
cadena = "Hola mundo"
longitud = calcularLongitud(cadena)
print(f"La longitud de la cadena es: {longitud}")

.
.

3. Inclusión

Capacidad de una clase hija de heredar y modificar el comportamiento de un método de la clase padre, permitiendo que cada clase tenga su propia implementación.

class Animal:
  def comer(self):
    print("El animal está comiendo")

class Perro(Animal):
  def comer(self):
    print("El perro está comiendo croquetas")

class Gato(Animal):
  def comer(self):
    print("El gato está comiendo atún")

perro = Perro()
perro.comer()

gato = Gato()
gato.comer()

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? 🤯

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 😦

![](