Sample Video Frame

23: Inheritance

In the previous exercise (and video) you learned about the concept of a class. A class allows you to encapsulate an interface in a single type so that other code expecting that type can work correctly without having to know about your implementation. In theory you should be able to take any objects of the same class and use them in any code expecting objects of that class.

Inheritance takes the concept of a class and allows you to make other "similar" classes by way of extending them in a parent and child relationship. You take a class you want to change, extend it with your new functionality, and you can use it anywhere the original can be used. This has advantages in saving you from having to implement code that someone else already wrote, allows you to work with existing code, and gives you some assurances that it will keep working.

Code Reuse

The first advantage of inheritance is to allow you to base new classes on old classes by only writing code to describe what's new. You can extend a Guitar class with a new Telecaster class rather than write a whole new Guitar class just so you can get a Telecaster class:

class Guitar {
    play(note) {
        // code for playing
    }
}

class Telecaster extends Guitar {
    volume(level) {
        // code for volume
    }

    tone(level) {
        // code for tone
    }
}

In this example I don't need to worry about writing a new play function for my Telecaster class because I am extending Guitar and Guitar already has one. I just write what's different about my Telecaster, which is it has volume and tone knobs.

Interoperability

Imagine you also have a Musician class and it inherits from the Person class from Exercise 22:

class Musician extends Person {
  play(instrument, sheet_music) {
    for(note in sheet_music) {
      instrument.play(note);
    }
  }
}

This class takes an instrument and plays it using the notes in a sheet of music. As long as your class inherits from Guitar and has the play function then this code will work. Extending a class lets you use it with other classes which is called "interoperability".

Type Safety

In some forms of OOP you'll also get the advantage of requiring a class for certain variables. In the Musician.play code above you could say "instrument has to be type Guitar for this function to work." JavaScript currently doesn't have the ability to do this, so actually any class that has a play method will work. I mean...sure it'll totally work.

The Code

You should study this code which has various instruments and some musicians who play them. You should watch the video as I go through this code and how each class demonstrates a different feature of our description above.

class Guitar {
  constructor (color, name, wood) {
    this.color = color;
    this.name = name;
    this.wood = wood;
  }

  play(note) {
    console.log(`${this.name}:${this.color}:${this.wood} plays ${note}`);
  }
}

class Jazzmaster extends Guitar {
  constructor (color, name, wood) {
    super(color, name, wood);
    this.volume = 0;
    this.tone = 0;
  }

  volume(level) {
    this.volume = level;
  }

  tone(level) {
    this.tone = level;
  }
}

class BassVI extends Jazzmaster {
  play(note) {
    console.log(`${note}`);
  }
}

class Person {
  constructor (name, age, eyes) {
    this.name = name;
    this.age = age;
  }

  talk(words) {
    console.log(`I am ${this.name} and ${words}.`);
  }
}

class Musician extends Person {
  play(instrument, sheet_music) {
    for(let note of sheet_music) {
      instrument.play(note);
    }
  }
}

let babbington = new Musician("Roy Babbington", 78);
let harris = new Musician("Jet Harris", 71);
let taliesin = new BassVI("red", "Taliesin");
let golden = new BassVI("gold", "Golden Arm");

babbington.play(taliesin, ['a','b','c','d']);
harris.play(golden, ['a','b','c','d']);

What You Should See

$ node "code.js" 
a
b
c
d
a
b
c
d

Learn JavaScript Today

Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.


Still Not Sure? Try the next FREE Lesson!