Inheritance in JavaScript: Modern Classes with ES6

Inheritance is a central concept in object-oriented programming that allows you to extend existing classes and utilize their properties and methods. JavaScript introduced a newer and more robust syntax for inheritance with the introduction of ES6, which is much easier to manage than the original prototype methods. In this guide, I will show you how to apply inheritance in JavaScript using the extends keyword and explain step by step how to correctly call the constructor of the base class with super.

Key Insights

• Inheritance in JavaScript is achieved through the extends keyword.
• The constructor of the base class must be called with super.
• Instance variables can be referenced in the derived class using the this keyword.

Step-by-Step Guide

Creating the Base Class

To get started with inheritance, we first create a base class called Shape. In this class, we define the constructor as well as some methods.

Here you define a class Shape that has a constructor. In this constructor, you can define variables and functions that other classes can access.

Exploring the Subclass

After creating the base class, you can now create a subclass that inherits from Shape. In this example, we call the new class ConcreteShape.

In this subclass, we use the extends keyword to indicate that ConcreteShape inherits from Shape. The constructor of the subclass calls the constructor of the base class Shape with super(), which is necessary to implement inheritance correctly.

Instantiating the Subclass

Now that we have created the subclass, it is time to create an instance of this class.

Here you create a new object myShape of the class ConcreteShape and pass a description to the constructor. Then you call the print method, which outputs the description.

Adding Additional Properties

You can add more properties to your subclass or even methods that are specific to this subclass.

Here you have extended the ConcreteShape class by adding additional parameters to the constructor.

Utilizing Inheritance

With the super keyword, you can call the describe method of the base class to combine the properties of the base class and the subclass.

Summary – Inheritance in JavaScript: From ES6 to ES13

In this tutorial, you learned how inheritance works in JavaScript, especially with the new class syntax. You saw how to define classes, how to inherit from a base class, and how to call the constructor correctly. These mechanisms make it easier for you to keep your codebase clean and maintainable by reusing features effectively.