Introduction

Hello again! In this part of our JavaScript Class Basics Revision, we delve into inheritance in object-oriented programming (OOP) with JavaScript. Inheritance allows us to share code across classes, thus improving readability and efficiency.

In this lesson, we'll clarify attribute and method inheritance in JavaScript using practical examples. Our lesson's blueprint includes defining inheritance, examining attribute inheritance, exploring method inheritance, and decoding the super() function in JavaScript. Ready? Let's get started!

Defining Inheritance

Inheritance involves creating a child class that inherits details from a parent class. In JavaScript, we often find scenarios where classes share common attributes or methods, which makes inheritance highly useful.

The extends keyword is used to set up inheritance, allowing one class to inherit properties and methods from another class. Here's an example featuring a parent class named Vehicle and a child class named Car:

In the Car class, the super() function inside its constructor calls the Vehicle class's constructor, enabling the inherited properties to be initialized correctly. The extends keyword signifies that Car is a subclass of Vehicle.

Inheritance types, such as Single, Multiple, Multilevel, and Hierarchical, in JavaScript cater to different needs. However, our focus in this lesson is primarily on single inheritance, where one parent class feeds one child class.

Attribute Inheritance

Attribute inheritance allows a child class to inherit the attributes of a parent class, with the exception of private fields. Private fields (declared with a # before the attribute name) are not accessible in child classes.

Consider this example featuring a parent class named Artist, and a child class named Musician:

However, if the name attribute in the Artist class were private, it wouldn't be accessible in the Musician class:

The Musician class inherits the name attribute from the Artist class and also has its own unique attribute, instrument, but it accesses the name attribute via a getter method since name is private.

Method Inheritance

Similar to attributes, method or function inheritance allows a child class to inherit the methods of a parent class.

In the example below, the Car class can invoke the start method from the Vehicle class:

In the absence of an explicitly defined constructor in the Car class, JavaScript automatically provides a default constructor, which internally calls super() to ensure the parent class's constructor is invoked. This initialization allows the Car class to inherit the brand attribute from the Vehicle class seamlessly.

Understanding the `super()` Function

The super() function is integral in inheritance for calling parent class methods from a child class, particularly useful in method overriding and initialization. It allows a child class to extend or utilize the functionality of a parent class without directly modifying it.

For instance, when overriding a method to add or alter its behavior, super() enables calling the original method from the parent class to integrate its functionality with new enhancements:

Similarly, during initialization, super() calls the constructor method of the parent class, making sure that the child class is currently initialized, allowing the child class to add its specific attributes seamlessly:

In these ways, super() facilitates a coherent and modular approach to inheritance by allowing child classes to build upon or adapt the functionality of their parent classes efficiently and cleanly.

Lesson Summary

We've successfully explored attribute and method inheritance in JavaScript and practiced using several examples. Mastering these concepts in real-life programming can enhance both efficiency and readability. Remember, practice is essential for proficiency!

On that note, are you ready for some practice exercises? They will solidify your understanding and prepare you for more complex programming tasks. Programming is all about experimenting, learning, and problem-solving. Enjoy the journey!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal