Inheritance and SubClasses Using ES6

#javascript #beginners #subclasses #es6

Javascript Inheritance and SubClasses

In Javascript there are many different patterns to follow when going about object instantiation. Each of these patterns: functional, functional-shared, prototypal and pseudoclassical, follow specific syntax guidelines and the pattern one chooses impacts how object inheritance is handled. If you're unsure of how instantiation patterns work, here is a great article covering the topic. When EMCAScript 2015 or ES6 was released, they introduced the ability to create subclasses using the keywords extend and super, both of which, will be discussed later. When an object is a subclass of another object, it inherits the methods and properties of the 'parent' object and has access to those. Now let's discuss how pseudoclassical instantiation, subclassing and object inheritance works with ES6!

The class Keyword

When using ES6 instantiation the keyword 'class' is used to denote a new instance of an object and its constructor. Since we're using ES6 we can create object methods right within the class function, using less code and creating a more readable object. Below is the format that the ES6 pseudoclassical instantiation follows. Note the use of the 'class' keyword at the start of the function.

class Animal {
  constructor(name, favFood) {
    this.name = name;
    this.food = favFood;
  }
  identifier() {
    return `I am ${this.name}`;
  }
}

Now that we have our 'parent' class, we can start creating subclasses based off of the parent object. In order to create a subclass we need to use the keyword 'extends', which allows us to copy the parent class into the new subclass that's being created. This is where our new class will be inheriting everything from the parent class! While extends does most of the heavy lifting, there's still a bit of work that needs to be done on our end. While the methods will be copied with extends, we will still have to create the constructor function within the new class being created. Below you'll see the structure of our subclass using the extends keyword and creating the constructor function within.

class Dog extends Animal {
  constructor() {
  // What Goes In Here?
  };
}

The super Keyword

Now our new subclass is looking pretty good, but what do we do with the constructor function within it? We'll be invoking the super keyword, which references the parent class's constructor function. This allows us to recreate the same properties from the parent class in the subclass. Let's take a look at how that works down below.

class Dog extends Animal {
  constructor(name, favFood, sound) { 
    // passing the parameters of the parent class
    // plus the parameter sound
    super(name, favFood);
    this.sound = sound;
  }
}

Now that we've successfully created our subclass from the parent class, let's look at how we can add methods to the subclass as well as overwrite previous methods inherited from the parent class, while maintaining those within the parent class. This is one of the great uses of subclasses within Javascript!

class Dog extends Animal {
  constructor(name, favFood, sound) {
    super(name, favFood);
    this.sound = sound;
  }
  makeNoise() {
    // Adds a makeNoise method to our dog class!
    return `${this.sound} ${this.sound}`;
  }
}

// Creating a subclass called Cat from our Dog subclass
class Cat extends Dog {
  constructor(name, favFood, sound, action) {
    super(name, favFood, sound);
    this.action = action;
  }
    makeNoise() {
    // Overwriting the makeNoise function for the Cat subclass
      return `Meow!`
    }
    catThing() {
    // Adding a new catThing class that returns this.action
    // as a string
      return `${this.action}`;
    }
}

Look at all we've done so far! We have an Animal class that is the parent class, a Dog class that is a subclass of the Animal class, and a Cat class that is a subclass of the Dog class. Let's look at how each of these subclasses operate and inherit the methods and properties of their parent class!


const bat = new Animal('Dracula', 'blood');

console.log(bat.name); // Prints 'Dracula' to the console

const doggie = new Dog('Spot', 'bones', 'bark');

doggie.identifier(); // returns 'I am Spot' // We still have the 
// identifier method in our Dog subclass!

doggie.makeNoise(); // Returns 'bark bark' 
// Our makeNoise function in our Dog subclass 
// still works as intended even though we 
// overwrote it within the Cat subclass!

const kitty = new Cat('Sabrina', 'fish', 'meow', 'purrr');

kitty.makeNoise(); // Returns 'Meow!'

kitty.catThing(); // Return 'purrr'

As you can see in the code lines above as we create new subclasses from a parent class, each subclass inherits what the parent class has and then whatever methods or properties that you designate within the constructor function. Using the ES6 pattern for creating subclasses is a great option for a programmer, and I highly recommend getting comfortable with the syntax and process because it is very useful.

Conclusion

We've covered the process on creating classes and subclasses within Javascript using ES6. As you've seen this method of class creation allows you to easily copy properties and methods over from a parent class using the extends and super keywords. This method is extremely useful and allows you the freedom to modify subclasses of the parent depending on how you want them to operate. Using the ES6 syntax for creating subclasses saves lines of code and thus memory, which are both great benefits. ES6 is supported by all current browsers and using it while creating classes and subclasses is a great tool in your programmer's toolbox, so get out there and start putting it to use in your code!

P.S. Don't forget to use the 'new' keyword when creating new instances of your class and subclasses!