Polimorfismo en JavaScript: sobrescritura de métodos con ejemplos

Problema

El pago con un if para cada tipo

La empresa tiene empleados normales, gerentes con bono y becarios a media jornada. Alguien hizo una sola clase Employee con un campo «rol», y el pago se calcula así:

function monthlyPay(e) {
  if (e.role === "gerente") {
    return e.salary + e.bonus;
  } else if (e.role === "becario") {
    return Math.trunc(e.salary / 2);
  }
  return e.salary;
}

Funciona. Pero entonces llega un nuevo tipo de empleado: un contratista. Necesitas un nuevo else if aquí, y en la función de los impuestos, y en la función de la nómina, y en todos los lugares donde alguien preguntó por el rol. Y cada empleado lleva un campo de bono, aunque solo los gerentes reciben bono.

El código del gerente está repartido por todo el programa en lugar de estar en el gerente.

La idea

Cada clase decide por sí misma

Con la herencia de la lección anterior, Manager e Intern son clases separadas. Deja que cada una diga cuál es su pago mensual. La clase padre tiene una versión general, y la hija escribe su propia versión del mismo método:

class Employee {
  // ... #name, #salary, el constructor y los getters

  monthlyPay() {
    return this.#salary;
  }
}

class Manager extends Employee {
  // ... #bonus y el constructor

  monthlyPay() {
    return this.salary + this.#bonus;
  }
}

const ivan = new Employee("Juan", 2000);
const maria = new Manager("María", 3000, 500);
console.log(ivan.monthlyPay());
console.log(maria.monthlyPay());

2000
3500

Esto se llama sobrescribir un método. La hija escribe un método con el mismo nombre. Para los objetos de la clase hija, su versión reemplaza a la de la clase padre.

No necesitas nada más: no hay palabra clave ni comprobación. Cualquier método se puede sobrescribir. JavaScript solo mira el nombre, no los parámetros. Es cómodo, pero significa que nada impide un error en el nombre o en los parámetros. Enseguida verás qué pasa entonces.

Más precisamente, para curiosos

En JavaScript no hay forma de prohibir que se sobrescriba un método.
TypeScript, JavaScript con tipos, tiene la palabra clave override y la comprueba antes de que arranque el programa. El JavaScript normal no tiene esa palabra clave.

Pruébalo

¿Qué cambió?

El becario sobrescribe solo el método del pago mensual:

¿Qué imprimirá el programa?

class Intern extends Employee {
  monthlyPay() {
    return Math.trunc(this.salary / 2);
  }
}

const ana = new Intern("Ana", 1600);
console.log(ana.monthlyPay());
console.log(ana.salary);

Respuesta

1600
1600

800
800

800
1600

La idea

Un array para todos

Un gerente es un empleado. Así que empleados, gerentes y becarios pueden estar en un array y tratarse en un solo bucle:

const staff = [
  new Employee("Juan", 2000),
  new Manager("María", 3000, 500),
  new Intern("Ana", 1600),
];
for (const e of staff) {
  console.log(`${e.name}: ${e.monthlyPay()} €`);
}

Juan: 2000 €
María: 3500 €
Ana: 800 €

El bucle llama al mismo método, e.monthlyPay(), y el resultado es distinto. La versión que se ejecuta es la del objeto, no la del tipo de la variable. Esto se llama polimorfismo: en griego, «muchas formas». Una llamada, y cada objeto responde a su manera.

Ahora un nuevo tipo de empleado es una clase nueva con su propio monthlyPay(). El bucle y el resto del programa se quedan como están. No hay ningún if sobre el rol ni un campo de bono en los empleados que no reciben bono.

La variable e no tiene tipo, así que a través de ella puedes escribir lo que quieras, también e.bonus. Si el objeto es un gerente, funciona. Si es un empleado normal, e.bonus es simplemente undefined, y el programa sigue como si nada. Cómo preguntar a los objetos qué saben hacer está en la lección «Comprobaciones de tipo».

Míralo

Qué método se ejecuta

const staff = [
  new Employee("Juan", 2000),
  new Manager("María", 3000, 500),
  new Intern("Ana", 1600),
];
for (const e of staff) {
  console.log(`${e.name}: ${e.monthlyPay()} €`);
}

Paso a paso, en palabras

El array guarda objetos de tres clases. Cada casilla guarda una flecha.
e apunta a Juan, un Employee normal: se ejecuta el monthlyPay de Employee.
e apunta a María, un Manager: se ejecuta su propio método, salario más bono.
e apunta a Ana, un Intern: el becario recibe la mitad del salario.
La misma línea, tres métodos distintos. Decide el objeto al que apunta e.

El array guarda tres flechas. Cada una apunta a un objeto de una clase distinta. En cada vuelta e apunta al objeto siguiente, y la llamada va al método de ese objeto: primero en Employee, después en Manager, después en Intern.

La elección se hace mientras el programa se ejecuta. En cada vuelta JavaScript busca monthlyPay primero en la clase del objeto, y después en su clase padre. Nadie comprueba por adelantado que todo objeto tenga ese método. Si alguno no lo tiene, el programa se detiene en su vuelta.

Pruébalo

Encuentra el error

El programa es el mismo, pero el becario recibe el salario completo:

Juan: 2000 €
María: 3500 €
Ana: 1600 €

Aquí está la clase Intern. ¿Qué línea tiene el error?

Elige la línea con el error.

El método se llama monthlypay, con «p» minúscula. Es un método nuevo, no una sobrescritura de monthlyPay. Así que se llama a la versión de la clase padre. JavaScript no dice nada: para JavaScript es simplemente un método más. Un despiste así solo lo descubres por la salida.

La idea

Añade a la clase padre, no la reescribas

A veces la hija no quiere reemplazar el método por completo, solo añadirle algo. Un gerente se describe como un empleado, más el bono. Llamas a la versión de la clase padre con super.toString():

toString() {
  return `${super.toString()}, bono ${this.#bonus} €`;
}

console.log(String(new Employee("Juan", 2000)));
console.log(String(new Manager("María", 3000, 500)));

Juan (2000 €)
María (3000 €), bono 500 €

Si Employee cambia cómo se describe, el gerente lo sigue por sí solo.

Este es también el toString() del módulo «Clases y objetos». Allí ya sobrescribías un método: la versión de Object.

Más precisamente, para curiosos

Puedes llamar a super.method() desde cualquier método de la hija, no solo desde el que sobrescribe.

JavaScript no compara los parámetros. Si escribes monthlyPay(extra) en Manager, sigue siendo una sobrescritura, y el bucle que llama a e.monthlyPay() da NaN para el gerente: extra es undefined, y un número más undefined no es un número. Así que el método que sobrescribe recibe los mismos parámetros que el de la clase padre.

Pruébalo

¿Qué falta?

El becario se describe como un empleado más la palabra «becario». ¿Qué va en el hueco?

class Intern extends Employee {
  toString() {
    return `${.toString()}, becario`;
  }
}

Ejercicio

Cada uno a su manera

Resuelve las tareas en tu editor. Cada tarea tiene un array de objetos de varias clases y un solo bucle.

1. Refugio de animales. Una clase Animal con un nombre y un método makeSound() que imprime «algún sonido». Dog y Cat lo sobrescriben. Pon uno de cada uno de los tres en un array:

Invitado: algún sonido
Rex: ¡Guau!
Misi: ¡Miau, miau!

2. El estudiante se presenta. Student de la lección anterior ya tiene una nota. Sobrescribe introduce() para que también diga la nota. Usa super.introduce(); no copies la línea de Person.

Soy Jorge, tengo 45 años.
Soy Elena, tengo 19 años.
Nota media: 5.5

3. Fiesta. Una clase Performance con un título y un método start(). DanceMove, BreakDanceMove (hereda de DanceMove, añade complejidad) y Song lo sobrescriben. Una clase Party guarda un array de actuaciones y tiene un método startParty() que lo empieza todo en orden y al final dice que la fiesta ha empezado.

Bailamos moonwalk
Bailamos windmill
  complejidad 8 de 10
Cantamos 'Bohemian Rhapsody'
Empieza rifa
¡La fiesta ha empezado!

Más tareas

Contratista. Añade a los empleados un Contractor, con horas y una tarifa por hora. Su pago mensual es horas × tarifa. Calcula las nóminas de Juan, María, Ana y Pablo (60 horas a 25 €):

Total de nóminas: 7800 €

Nómina. Dale a Employee un método payslip() que devuelve el texto «nombre: pago €» con el pago mensual. Escríbelo solo en Employee. ¿Por qué funciona bien también para el gerente y para el becario?

Test

Ponte a prueba

1. const e = new Manager("María", 3000, 500); ¿Qué monthlyPay se ejecuta con e.monthlyPay()?El de Manager, porque el objeto es un ManagerLos dos, uno tras otroEl de Employee, porque Manager hereda de Employee

2. const staff = [new Employee("Juan", 2000), new Manager("María", 3000, 500)]; ¿Qué imprime console.log(staff[0].bonus)?El programa se detiene con un error0undefined: un empleado normal no tiene bono, y JavaScript no se detiene

3. ¿Cómo sabe JavaScript que el método de la hija sobrescribe el de la clase padre?Por la palabra clave overrideEn JavaScript los métodos no se pueden sobrescribirPor el nombre: un método con el mismo nombre en la hija reemplaza al de la clase padre

4. ¿Qué hace super.toString() dentro del toString() de la clase hija?Crea un objeto de la clase padreVuelve a llamar al mismo método, para siempreLlama a la versión de la clase padre

5. Manager tiene monthlyPay(extra), mientras que Employee no tiene parámetro. El bucle llama a e.monthlyPay() para cada empleado. ¿Qué imprime para María?El programa no arranca3000NaN: extra es undefined, y un número más undefined no es un número

Polimorfismo

Cookies