Objects: Inheritance
Learning Goals
- Understand and describe OOP and its benefits
- Implement and structure a basic program around objects
- Understand how to utilize inheritance with classes
Vocab
OOPObject Oriented ProgrammingClassA blueprint or template of an object that describes what information it should contain and how it should interact with the dataSubclassA class that inherits from a parent class (also known as a child class)extendsA keyword that is used in class declarations to create a class that is a child of another class.superA keyword that is used to access and call functions on an class’ parent.InheritanceThe practice of allowing new objects to take on the data and behavior of their parents
Warm Up
Discuss in groups:
In groups, add some stickies to this Jamboard
- What are some of the benefits of Object Oriented Programming? Think about why we organize code into classes.
OOP Benefits
- Code reusability
- Encapsulation: values & functionality are scoped to the specific object
- Design & Scalability: OOP forces programmers to meticulously plan the project. OOP is also much more maintainable for larger programs
- Maintainable: OOP tends to be easier to modify specific pieces of the code without affecting the larger program
Inheritance
Inheritance allows you to create an object based on another one. Let’s look at an example of an inheritance structure:
Discuss in groups:
- What traits or functionality do ALL instruments have?
- What traits or functionality could a guitar inherit from an instrument? What about a piano?
- Getting more specific, what traits/functionality do these sub classes inherit from the parent class?
| Parent class | Sub class |
| Guitar | Acoustic Guitar / Electric Guitar / Bass Guitar |
| Piano | Electric Keyboard / Grand Piano / Harpsichord |
| String instrument | Violin, Viola, Cello, Bass |
- Outside of instruments, can you think of other examples similar to the above?
Inheritance syntax and examples
The basic inheritance syntax will look something like this:
class Childclass extends Parentclass {...}
Let’s go back to our previous example with an Instructor used in the last lesson:
class Instructor {
constructor(name, module, traits) {
this.name = name;
this.module = module;
this.traits = traits;
}
teachLesson(duration, lesson) {
if (duration > 3) {
return `${this.name} can\'t teach a lesson that long!`;
} else {
return `Gunna teach you all real good about ${lesson}.`;
}
}
gradeProject(project) {
return `${this.name} is grading ${project}.`
}
}
let instructor = new Instructor('Hannah', 2, ['hungry', 'calm']);
Similar to an instructor, we might have a teaching assistant class to keep track of this data. Teaching Assistants should have a name, module, and traits property, just like instructors do. They should also be able to teach lessons, grade projects, and schedule check-ins.
Instead of creating another class and re-creating these methods, we can create a child class or a sub class that inherits all of the properties and methods from our Instructor class. The only new behavior we need TAs to perform is to schedule check-ins.
In Breakout Groups
Here is an example of what our TA might look like with out new class inheriting specific properties and methods from the Instructor class. Copy the Instructor class and the TA class into RunJS or Repl and complete the following exercises:
class TA extends Instructor {
constructor(name, module, traits) {
super(name, module, traits);
}
scheduleCheckIns() {
console.log('Scheduling checkins!');
}
}
let bob = new TA('Bob', 2, ['serious']);
- What is
super? Try commenting it out and accessingbob’s properties. What error do you get? - Comment
superback in and then log each of the properties including thename,module, andtraits. - Check out the MDN Documentation on
super. - Add a new property of
experienceto signify years of experience that TA has. Check both theInstructorandTAto see which class has the added property. - Should a
TAstill have access to their parent’s methods? Try havingbob“teach a lesson” or “grade a project.”
Breakdown of Syntax
- We create a new class called
TAthat extends fromInstructor(this tells our TA that it is going to be subclass ofInstructor) - We create our constructor, which takes in the same parameters as our
Instructorclass - Within our constructor, we can invoke the built-in
superfunction to call the constructor method of the parent class, passing through the properties that it needs to inherit from the parent class - We add our additional behavior method - scheduling check-ins
What is super?
The super keyword in JavaScript acts as a reference variable to the parent class.
The super keyword is used to access and invoke methods on the parent class. In the example above, the super keyword is used to invoke the constructor method of the parent class.
When used in a constructor, the super keyword appears alone and must be used before the this keyword is used. The super keyword can also be used to call functions on a parent object while keeping the current context (of our child class).
Calling super() initializes this in TA class. It acts as the Instructor class constructor. Therefore, passing it its parameters initializes the properties in Instructor for TA which thereby inherits those properties.
OOP: Building out a game
With a partner, think about an arcade game such as Frogger, Galaga, Centipede, or Snake and come up with what parts could be templated with a class.
- What properties and methods might our parent class have?
- Come up with a sub class that could inherit from it and either add new behaviors or override existing ones.
- Create a Repl and build out at least one parent class and two sub classes!
Checks for Understanding
- Explain how inheritance works. How does this play into the Prototype Chain?
- Why do we call
super()in the inherited class’s constructor?
