Inheritance and Polymorphism

Inheritance Basics

Inheritance lets a class reuse behavior from a parent class and add its own details.

extends `extends` creates a child class that starts with the parent class behavior.

Inheritance Basics

dogName
inheritance.ts
Replay: real traced execution (multi-file project)
class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    label(): string {
        return this.name;
    }
}

class Dog extends Animal {
    breed: string;

    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }

    summary(): string {
        return `${this.label()} is a ${this.breed}`;
    }
}

const dogName: string = "Milo";
const dog: Dog = new Dog(dogName, "terrier");

console.log(dog.summary());

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    label(): string {
        return this.name;
    }
}

class Dog extends Animal {
    breed: string;

    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }

    summary(): string {
        return `${this.label()} is a ${this.breed}`;
    }
}

const dogName: string = "Ruby";
const dog: Dog = new Dog(dogName, "terrier");

console.log(dog.summary());

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    label(): string {
        return this.name;
    }
}

class Dog extends Animal {
    breed: string;

    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }

    summary(): string {
        return `${this.label()} is a ${this.breed}`;
    }
}

const dogName: string = "Scout";
const dog: Dog = new Dog(dogName, "terrier");

console.log(dog.summary());

  1. dogName ← Milo, this.name ← Milo, this.breed ← terrier, dog ← [object Object]

    4    constructor(name: string) {5        this.name = nameMilo;6    }78    label(): string {9        return this.name;10    }11}1213class Dog extends Animal {14    breed: string;1516    constructor(name: string, breed: string) {17        super(nameMilo);18        this.breed = breedterrier;19    }2021    summary(): string {22        return `${this.label()} is a ${this.breed}`;23    }24}2526const dogName→ Milo: string = "Milo";  //@dogName="Ruby", "Scout"27const dog→ [object Object]: Dog = new Dog(dogNameMilo, "terrier");2829console.log(dog[object Object].summary());
    values this stepMilothis.nameterrierthis.breed

  2. summary(): string

    18    this.breed = breed;19}2021summary(): string {22    return `${this.label()} is a ${this.breedterrier}`;23}

  3. label(): string

    5    this.name = name;6}78label(): string {9    return this.nameMilo;10}

  4. console.log(dog.summary());

    26const dogName: string = "Milo";  //@dogName="Ruby", "Scout"27const dog: Dog = new Dog(dogName, "terrier");2829console.log(dog[object Object].summary());
    outputMilo is a terrier

  1. dogName ← Ruby, this.name ← Ruby, this.breed ← terrier, dog ← [object Object]

    4    constructor(name: string) {5        this.name = nameRuby;6    }78    label(): string {9        return this.name;10    }11}1213class Dog extends Animal {14    breed: string;1516    constructor(name: string, breed: string) {17        super(nameRuby);18        this.breed = breedterrier;19    }2021    summary(): string {22        return `${this.label()} is a ${this.breed}`;23    }24}2526const dogName→ Ruby: string = "Ruby";27const dog→ [object Object]: Dog = new Dog(dogNameRuby, "terrier");2829console.log(dog[object Object].summary());
    values this stepRubythis.nameterrierthis.breed

  2. summary(): string

    18    this.breed = breed;19}2021summary(): string {22    return `${this.label()} is a ${this.breedterrier}`;23}

  3. label(): string

    5    this.name = name;6}78label(): string {9    return this.nameRuby;10}

  4. console.log(dog.summary());

    26const dogName: string = "Ruby";27const dog: Dog = new Dog(dogName, "terrier");2829console.log(dog[object Object].summary());
    outputRuby is a terrier

  1. dogName ← Scout, this.name ← Scout, this.breed ← terrier, dog ← [object Object]

    4    constructor(name: string) {5        this.name = nameScout;6    }78    label(): string {9        return this.name;10    }11}1213class Dog extends Animal {14    breed: string;1516    constructor(name: string, breed: string) {17        super(nameScout);18        this.breed = breedterrier;19    }2021    summary(): string {22        return `${this.label()} is a ${this.breed}`;23    }24}2526const dogName→ Scout: string = "Scout";27const dog→ [object Object]: Dog = new Dog(dogNameScout, "terrier");2829console.log(dog[object Object].summary());
    values this stepScoutthis.nameterrierthis.breed

  2. summary(): string

    18    this.breed = breed;19}2021summary(): string {22    return `${this.label()} is a ${this.breedterrier}`;23}

  3. label(): string

    5    this.name = name;6}78label(): string {9    return this.nameScout;10}

  4. console.log(dog.summary());

    26const dogName: string = "Scout";27const dog: Dog = new Dog(dogName, "terrier");2829console.log(dog[object Object].summary());
    outputScout is a terrier

Follow the Inheritance

  1. dogName starts as Milo.
  2. new Dog(dogName, "terrier") calls the child constructor.
  3. super(name) stores Milo using the parent Animal constructor.
  4. The child stores breed as terrier.
  5. summary() combines label() from the parent with the child breed. | value | where it is stored | used in output | | --- | --- | --- | | Milo | parent name | Milo | | terrier | child breed | terrier | | summary | method result | Milo is a terrier |

Exercise: inheritance.ts

Reproduce Milo is a terrier, then use the pinned dogName variants Ruby and Scout to predict Ruby is a terrier and Scout is a terrier.