OOP Concepts — Inheritance

In today’s article, we will be discussing Inheritance, one of the four pillars of Object Oriented Programming. We will discuss what inheritance is, why it’s useful, and an example of inheritance using JavaScript. Be sure to check out some of my other articles where I discuss the other three pillars of OOP, and various other programming topics.

Before we get into Inheritance, lets talk a bit about Object Oriented Programming.

Object Oriented Programming

Object Oriented Programming is a model that organizes software design around objects. It allows us to focus on the objects that we want to manipulate, rather than the functions we use to manipulate them. This is very useful when creating large applications that are complex and actively maintained by developers. OOP is broken down into 4 key components: Classes, Objects, Methods, and Attributes. Together, these components can successfully work together to create code that is well-structured, easy to read, and reusable.

There are 4 pillars that hold up Object Oriented Programming that you should always keep in mind when following the OOP model. Today, we will be discussing Inheritance, which is one of those 4 pillars.

Inheritance

What is Inheritance?

Inheritance is a mechanism where you can derive a class from another class to create a hierarchy of classes. These classes can share a set of attributes and methods, hence, the inheritance. Each class can be derived from one other class, which is called the Superclass or Parent class. The class that inherits from the Parent class is known as the Subclass, or child class. To establish Inheritance, you use the keyword extends while declaring the class to identify the class that your subclass inherits from.

If a class does not specify its parent, it inherits from the class Object, which is the root of all inheritance hierarchies. It is the only class that doesn’t extend another class.

What are Access Modifiers?

An Access Modifier defines how another class can access an attribute or method within your class. This highlights Encapsulation, which limits what is and isn’t presented to other classes. We will take a look at an example of this in our coding example later on.

Why is Inheritance useful?

The main benefit of using Inheritance in your code is that it provides code re-usability. Instead of re-writing the same code over and over again, we can just inherit these reused methods from another class. In doing so, this saves you tons of time when working on a project because we can inherit methods and attributes from our Parent class. One thing to note as well is that while we can inherit properties from the Parent class, the Child class can also have its own properties. We can even override the inherited properties from the Parent class so that they better fit the Child classes needs.

Inheritance in action

What is a real world example of Inheritance?

Object Oriented Programming is all about thinking of your code as if it were a real life object, so it’s important to recognize examples of OOP in the real world. A good example of inheritance would be a car, bike, or bus. While each of these objects are their own type of vehicle, they are still a vehicle.

Inheritance using JavaScript

Let’s continue on with our example above and write some classes using Inheritance in JavaScript.

Let’s start with our Vehicle class

class Vehicle {

    // private properties, aka access modifiers
    #people;
    #maxSpeed;

    // constructor, the properties that will be passed into the Object at instantiation
    constructor(people, maxSpeed) {
        this.#people = people
        this.#maxSpeed = maxSpeed
    }

    // getters
    getPeople(){
        console.log(`this vehicle can fit ${this.#people} people in it`)
    }

    getMaxSpeed(){
        console.log(`this vehicle can move at a maximum speed of ${this.#maxSpeed}mph`)
    }

    // setters
    setPeople(people){
        this.#people = people
        return this.#people
    }

    setMaxSpeed(maxSpeed){
        this.#maxSpeed = maxSpeed
        return this.#maxSpeed
    }

    description(){
        console.log(`Our vehicle can fit ${this.#people} person(s), and can move at a maximum speed of ${this.#maxSpeed}mph`)
    }

}

Our Vehicle class has a few properties that we can see above. We have our people and maxSpeed properties, getters, setters, and a description method that gives us a brief description of our Vehicle.

Now, let’s take a look at our child classes.

class Bike extends Vehicle {

}

class Bus extends Vehicle {

}

class Car extends Vehicle {

}

Without even adding anything to these child classes, they already have the same properties and methods the Vehicle class has. Let’s create an instance of our Bike class as an example.

var bike = new Bike(1, 30)

bike.description()
// Our vehicle can fit 1 person(s), and can move at a maximum speed of 30mph

Awesome! We didn’t even add any code to our Bike class, yet it can already perform some tasks. Why don’t we add some additional methods to our Bike class to give it some individuality.

class Bike extends Vehicle {

    #pegs;
    #type;

    constructor(people, maxSpeed, type, pegs) {
        super(people, maxSpeed); // gives us access to these parent properties
        this.#type = type;
        this.#pegs = pegs; // this will be a boolean value
    }

    hasPegs() {
        if (this.#pegs) {
            console.log('this bike has pegs!')
        } else {
            console.log('this bike does not have pegs')
        }
    }

    getType() {
        return this.#type;
    }

    description() {
        console.log(`Number of People: ${this.getPeople()}`)
        console.log(`Max Speed: ${this.getMaxSpeed()}mph`)
        console.log(`Has Pegs?: ${this.#pegs}`)
        console.log(`Type of Bike: ${this.getType()}`)
    }

}

var mountainBike = new Bike(1, 30, 'Mountain Bike', true)

mountainBike.description();
// Number of People: 1
// Max Speed: 30mph
// Has Pegs? true
// Type of Bike: Mountain Bike

Here, we have our Bike class with its own methods that are completely separate from the Vehicle class, and all the other child classes. We were even able to override our description method so that the Bike class has its own description.

Conclusion

In this article, we discussed Inheritance, which is one of the four pillars of Object Oriented Programming. We discussed what it is, why it’s useful, and even went over a real world example of Inheritance using JavaScript. Overall, Inheritance’s main focus is code reusability by giving us the power to give one class the same properties of another class. I hope you enjoyed this article, and even learned something along the way. Feel free to check out some of my other articles covering the other four pillars of OOP, and various other coding topics. Keep learning, and happy coding!