Classes & OOP: Inheritance

So far, the only type of animal we've defined is a cat (via the 'Cat' class). Our 'Cat' class also requires us to name our cats. Finally, our 'Cat' class performs rendering to the web page. However, what if we wanted to introduce other animals? How should we implement dogs, pandas, and rhinos?

While the simple answer is that we can just copy, paste, and modify our code from Cat.jspp into Dog.jspp, Panda.jspp, and Rhino.jspp, this is usually not good programming. Instead, we might notice that there is a lot of repetition in the design; all the animals need a name, all the animals need to be rendered to our web page, and all the animals can be categorized together. Therefore, we can define the behaviors we need for animals in general (such as rendering to a web page) and have all our animal classes "inherit" this common behavior. Furthermore, some animals might not need names; for example, domesticated animals like cats and dogs might need names, but we might not want to name our pandas and rhinos.

First, let's start by examining Cat.jspp. What data or behavior in Cat.jspp should be common to all animals?

From what we've defined so far, it should only be the render() method. We'll use that as the basis for understanding inheritance. Earlier, we created an Animal.jspp file. It's currently empty so open it and let's define an 'Animal' class:

    external $;

    module Animals
    {
        class Animal
        {
            var $element = $(
                """
                <div class="animal">
                    <i class="icofont icofont-animal-cat"></i>
                </div>
                """
            );

            void render() {
                $("#content").append($element);
            }
        }
    }
    

This works well as a basic template. However, a keen observer will notice we have a problem: the $element field will always render a cat icon. We'll get back to this later, but, first, let's change Cat.jspp to inherit from our new 'Animal' class:

    external $;

    module Animals
    {
        class Cat : Animal
        {
            string _name;

            Cat(string name) {
                _name = name;
            }
        }
    }
    

We removed the $element field and render() method from Cat.jspp and we added this to the class declaration:

class Cat : Animal

The colon syntax specifies the inheritance relationship. In this case, our 'Cat' class inherits from the 'Animal' class. In other words, our 'Cat' class extends the 'Animal' class; everything that belongs to the 'Animal' class (fields, getters/setters, methods, etc) also belongs to the 'Cat' class.

In inheritance, our 'Cat' class is known as the "subclass" or "derived class" of 'Animal'. 'Animal' may be referred to as the "superclass" or "base class."

If you try to compile your code right now, you'll still see the cats rendered to the page exactly as before, but, if you hover your mouse over any of the cats, you will not see its respective name. The render() method on 'Cat' is now derived from the 'Animal' class. Since our 'Animal' class does not take names (as we want to be able to generalize the class for wild animals like pandas and rhinos), its render() method likewise does not render the HTML 'title' attribute needed to show a name on mouse over. However, we can make this behavior possible. In order to do that, it requires explanation of access modifiers, which we will now cover.