Polymorphism

Follow along with code examples here!

Table of Contents:

• Inheritance and "Is A" Relationships

• Array is a Subclass of Object

• Establishing Inheritance Between Custom Classes

• Extends and Super

• Refactor Challenge

• Polymorphism

• Using Classes with Other Classes

• Challenge: User and Admin

• Challenge

• Summary

Inheritance and "Is A" Relationships

Inheritance is a pillar of object-oriented programming. It describes a relationship between two classes: a subclass that inherits methods from a superclass. As a result, instances of the sub-class can use methods defined in a super-class.

We call this an "Is A" relationship

A Person class sits at the top of the "tree". A Doctor, a Professor, and a Student class sit below and all inherit from the Person class. A GraduateStudent class inherits from the Student class.

Question: What is the inheritance relationship between the Professor class and the Person class? What about the GraduateStudent class and the Person class?

Array is a Subclass of Object

The Array class is a sub-class of the Object class which is the super-class.

Every Array instance gets methods from the Array.prototype which inherits methods from the Object.prototype. Therefore, all arrays can use Object.prototype methods like toString().

Try running the following code:

const arr = [1,2,3];

console.log(arr.toString());
console.log(arr); // expand the prototype chain to find the .toString() method

console.log(typeof arr); 
console.log(arr instanceof Array);
console.log(arr instanceof Object);

Establishing Inheritance Between Custom Classes

Imagine we have a Person class. I want to make another class called Programmer that can do everything a Person can, with some additional properties and behaviors that only instances of Programmer will have.

How NOT to do it:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
  }
  makeFriend(friend) {
    this.friends.push(friend)
    console.log(`Hi ${friend}, my name is ${this.name}, nice to meet you!`);
  }
  doActivity(activity) {
    console.log(`${this.name} is ${activity}`);
  }
}

class Programmer {
  constructor(name, age, language) {
    this.name = name;
    this.age = age;
    this.friends = [];
    this.favoriteLanguage = language;
  }
  makeFriend(friend) {
    this.friends.push(friend)
    console.log(`Hi ${friend}, my name is ${this.name}, nice to meet you!`);
  }
  doActivity(activity) {
    console.log(`${this.name} is ${activity}`);
  }
  code() {
    this.doActivity(`writing some ${this.favoriteLanguage} code.`);
  }
}

Q: What bad practice exists this code?

Extends and Super

To remove the repetitive code AND to establish a relationship between Programmer and Person, we use the extends and super keywords to define our Programmer class:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
  }
  makeFriend(friend) {
    this.friends.push(friend)
    console.log(`Hi ${friend}, my name is ${this.name}, nice to meet you!`);
  }
  doActivity(activity) {
    console.log(`${this.name} is ${activity}`);
  }
}

class Programmer extends Person {
  constructor(name, age, language) {
    super(name, age);                 // invoke the Person constructor, setting the name, age, and friends properties on `this`
    this.favoriteLanguage = language; // add a favoriteLanguage property only for Programmers
  }
  
  // makeFriend is inherited
  // doActivity is inherited
  
  code() { // a new method only Programmer instances can use
    this.doActivity(`writing some ${this.favoriteLanguage} code.`);
  }
}

Refactor Challenge

Take the first code snippet and refactor it such that the Programmer class extends the Person class.

Using these classes, do the following:

• Create an instance of Programmer

• Invoke all of the methods that the instance inherits

• Use the instanceof operator to confirm that your instance is a Programmer AND a Person

Then, with a partner, discuss these questions:

Question 1: What does extends do?

Question 2: What does super do?

Question 3: What do we know about the relationship between a Programmer and a Person?

Question 4: How does the code method work?

Ben's Answer

• extends makes the Programmer inherit methods from Person. It sets Person.prototype as the prototype for Programmer.prototype

• super() invokes the Person constructor function using its own value of this. Any properties that the Person constructor sets on this will be set on Programmer.

• Programmer is said to be a subclass of Person.

• Person is said to be a superclass of Programmer.

• Programmer will inherit properties and methods from Person

• Instances of Programmer are also instances of Person

• code invokes the doActivity method inherited from Person.prototype

Polymorphism

Polymorphism means "many forms".

Polymorphism is a concept in object-oriented programming where multiple types of objects share "signatures" (they have the same property and method names even if their values/implementations are different).

The impact of polymorphism is that our program can reliably use different types of objects in the same way if they all descend from the same parent class.

class Person {
  constructor(name) {
    this.name = name;
    this.friends = [];
  }
  makeFriend(friend) {
    this.friends.push(friend)
    console.log(`Hi ${friend}, my name is ${this.name}, nice to meet you!`);
  }
}

class Programmer extends Person {
  // the constructor can be inherited too as long as the signature doesn't need changing

  // here we totally override the parent method
  makeFriend(friend) {
    this.friends.push(friend);
    console.log('tap tap tap');
  }
}

class Musician extends Person {
  constructor(name, instrument) {
    super(name);
    this.instrument = instrument;
  }
  makeFriend(friend) { // Method Override
    super.makeFriend(friend)
    console.log(`I can play the ${this.instrument}. Do you know any instruments?`);
  }
}

const carmen = new Person("Carmen");
const reuben = new Programmer("Reuben");
const ben = new Musician("Ben", "Piano");
const people = [carmen, reuben, ben];

// Ben, reuben, and carmen are all hanging out. 
// Maya enters the room and wants to be friends with everyone!
// Because everyone is a Person, we can do this:
people.forEach(person => person.makeFriend("Maya"));

// Output:
// "Hi Maya, my name is Carmen, nice to meet you!"
// "Hi Maya, my name is Reuben, nice to meet you!"
// "Hi Maya, my name is Ben, nice to meet you!"
// "I can play the Piano. Do you know any instruments?"

This demonstrates polymorphism because ben, reuben, and carmen are all descendants of Person which we know defines a makeFriend method. Even though reuben and carmen are different subtypes, we can treat them as Person objects as well.

A Person can come in "many forms".

Q: What does super.makeFriend(friend) do?

Ben's Answer

super.makeFriend(friend) will call the superclass's makeFriend method, adding the friend argument to the this.friends array and printing out the greeting message. It is common when method overriding to invoke the superclass's version of the method and then adding on additional statements to execute.

Let's look at another example of polymorphism. In this example, we have a Car class and a RaceCar subclass.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  drive() {
    console.log("Vrooom");
  }
}

class RaceCar extends Car {

  // the constructor can be inherited too as long as the signature doesn't need changing
  
  drive() { // Method Override
    console.log("Vah... Vah...");
    super.drive(); // invoke the parent class method
    console.log("WHEEEEEEE!!!!");
  }
}

const car1 = new Car("Chevy", "Cobalt");
const car2 = new RaceCar("Ferrari", "Portofino");
const car3 = new Car("Tesla", "Model X");

const cars = [car1, car2, car3];
cars.forEach((car) => car.makeSound()); 
// since they are all Cars, they all have drive, even if they behave differently

Both classes implement a method called drive but they have their own implementations. The code that calls these methods doesn't care how each class implements drive() — as long as instances of Car and RaceCar have a makeSound method at all, the code will work.

The subclass RaceCar uses the Car drive method sandwiched between two of its own console.log statements.

Car objects can come in many forms (they look the same, but they may behave differently).

Using Classes with Other Classes

Challenge: Refactor the makeFriend method so that instead of adding a friend's name, it takes in a Person object. When a person is added as a friend, both person objects should have each other as friends.

Ben's Solution

We only have to modify the Person class and all subclasses will inherit the new behavior. Instead of passing in a friend's name, pass in the entire Person object and have both friends add each other to the friend list.

We have to be careful to not create an infinite recursion. We will end up with a circular reference though.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
  }
  makeFriend(friend) {
    if (this.friends.includes(friend)) {
      return;
    }
    
    this.friends.push(friend)
    console.log(`Hi ${friend.name}, my name is ${this.name}, nice to meet you!`);
    
    friend.makeFriend(this);
  }
  doActivity(activity) {
    console.log(`${this.name} is ${activity}`);
  }
}

const ben = new Person("Ben", 28);
const carmen = new Person("Carmen", 22);
const reuben = new Person("Reuben", 35);

ben.makeFriend(carmen);
ben.makeFriend(reuben);

console.log(ben, reuben, carmen)

Challenge: User and Admin

Challenge

Create two classes, User and Admin.

A User should have the following properties:

• username a string provided to the constructor

• isOnline with a default value false

A User should have the following methods:

• login sets isOnline to true and prints <username> has logged in!

• logout sets isOnline to false and prints <username> has logged out!

An Admin should be a subclass of User. It should also have:

• A property isAdmin set to true

• A method called doSecretAdminStuff that just prints a message "Doing secret admin stuff".

Then, create a user instance and an admin instance and demonstrate how to use all of their methods.

Summary

• Inheritance occurs when a child class inherits properties and methods from a parent class

  • The extends keyword creates this relationship

  • The super keyword references the parent class

  • You can invoke super() to invoke the parent class constructor.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
  }
  makeFriend(friend) {
    this.friends.push(friend)
    console.log(`Hi ${friend}, my name is ${this.name}, nice to meet you!`);
  }
  doActivity(activity) {
    console.log(`${this.name} is ${activity}`);
  }
}

class Programmer extends Person {
  constructor(name, age, language) {
    super(name, age);                 // invoke the Person constructor, setting the name, age, and friends properties on `this`
    this.favoriteLanguage = language; // add a favoriteLanguage property only for Programmers
  }
  
  // makeFriend is inherited
  // doActivity is inherited
  
  code() { // a new method only Programmer instances can use
    this.doActivity(`writing some ${this.favoriteLanguage} code.`);
  }
}

• Polymorphism ("many forms") occurs when multiple types of objects share "signatures" (they have the same property and method names).

  • The impact of polymorphism is that our program can reliably use different types of objects in the same way if they all descend from the same parent class.

  • Method Overriding means that method signatures are the same even if their implementations are different

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  drive() {
    console.log("Vrooom");
  }
}

class RaceCar extends Car {

  // the constructor can be inherited too as long as the signature doesn't need changing
  
  drive() { // Method Override
    console.log("Vah... Vah...");
    super.drive(); // invoke the parent class method
    console.log("WHEEEEEEE!!!!");
  }
}

const car1 = new Car("Chevy", "Cobalt");
const car2 = new RaceCar("Ferrari", "Portofino");
const car3 = new Car("Tesla", "Model X");

const cars = [car1, car2, car3];
cars.forEach((car) => car.makeSound()); 
// since they are all Cars, they all have drive, even if they behave differently