DEV Community

Abssi Franki
Abssi Franki

Posted on

Understanding Inheritance and Prototypal Chains in JavaScript

Inheritance is a fundamental concept in programming that allows you to create a new class by inheriting properties and methods from an existing class. In JavaScript, inheritance is achieved through a mechanism known as prototypal inheritance. This powerful mechanism enables you to build complex class hierarchies and share functionality among objects efficiently.

1. Creating a Base Class for Digital Products:

Let's consider a scenario involving a digital product e-commerce platform like Netflix. We'll start by creating a base class called DigitalProduct that encapsulates common properties and methods for all digital products.

class DigitalProduct {
    constructor(title, price) {
        this.title = title;
        this.price = price;
    }

    getInfo() {
        return `Title: ${this.title}, Price: $${this.price}`;
    }
}
Enter fullscreen mode Exit fullscreen mode

In this example, DigitalProduct serves as the foundation for all digital products. It has a constructor to initialize the title and price, and a method getInfo() that returns information about the product.

2. Extending the Base Class for Movies:

Now, let's create a specialized class for movies that inherits from DigitalProduct. This class will have additional properties and methods specific to movies.

class Movie extends DigitalProduct {
    constructor(title, price, duration) {
        super(title, price);
        this.duration = duration;
    }

    getInfo() {
        return `${super.getInfo()}, Duration: ${this.duration} minutes`;
    }
}
Enter fullscreen mode Exit fullscreen mode

In this code snippet, the Movie class extends DigitalProduct using the extends keyword. It adds a new property duration and overrides the getInfo() method to include movie-specific information.

3. Creating a TV Show Class with Season Information:

Continuing with our Netflix example, let's create a class for TV shows. Each TV show can have multiple seasons, so we'll extend DigitalProduct again and add a new property for seasons.

class TVShow extends DigitalProduct {
    constructor(title, price, seasons) {
        super(title, price);
        this.seasons = seasons;
    }

    getInfo() {
        return `${super.getInfo()}, Seasons: ${this.seasons}`;
    }
}
Enter fullscreen mode Exit fullscreen mode

In this final snippet, the TVShow class inherits from DigitalProduct and introduces the seasons property. The getInfo() method is overridden to include the number of seasons.

Through these examples, we've showcased the power of prototypal inheritance in JavaScript. By creating a hierarchy of classes, you can efficiently build and extend functionality for a digital product e-commerce platform like Netflix. This approach promotes code reuse, maintainability, and a structured design for your applications.

To continue reading and access the full tutorial, please visit our website:
easyjavascript4you

Full tutorial:
Creating Class Hierarchies with Inheritance and Prototypal Chains in JavaScript

Top comments (0)