Using JavaScript Subclass [In-Depth Tutorial]

Introduction to JavaScript Subclass

As a developer, you may often find yourself in a situation where you need to create a class that shares properties and methods with another class. This is where subclassing comes in handy. By creating a subclass in JavaScript, you can inherit all of the methods and properties of a superclass and add or modify them as needed.

Subclassing is a powerful feature of object-oriented programming (OOP) that allows you to create a hierarchy of related classes and reuse code effectively. It is a common pattern in many programming languages and can greatly simplify the process of developing applications.

In the previous article we explained working with JavaScript Classes. In this article, we will explore the concept of subclasses in JavaScript and provide examples of how they can be used in your code.

Example-1: Creating subclasses in JavaScript

In object-oriented programming, a subclass is a class that is derived from another class (called the superclass or base class). The subclass inherits all the methods and properties of the superclass, and can also have its own methods and properties.

JavaScript is a prototype-based language, which means that it doesn't have classes in the traditional sense. However, you can still create subclasses in JavaScript using the prototype chain.

Here's an example of how to create a subclass in JavaScript

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name}`);
};

function Cat(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.meow = function () {
    console.log("Meow!");
};

const cat = new Cat("Fluffy", "Siamese");
cat.sayHello();
cat.meow();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);

Output

Hello, my name is Fluffy
Meow!
true
true

In the example above, we define an Animal constructor function that has a name property and a sayHello method. We then define a Cat constructor function that is a subclass of Animal.

To create the subclass, we use the Object.create method to create a new object that has Animal.prototype as its prototype. This creates a prototype chain that allows the Cat object to inherit the methods and properties of the Animal object.

We then use the call method to invoke the Animal constructor with the this keyword set to the new Cat object. This allows the Cat object to have its own name property, in addition to the inherited sayHello method.

Finally, we add a new meow method to the Cat prototype, and create a new Cat object called cat. The cat object has both the inherited sayHello method and the new meow method, and is an instance of both the Cat constructor and the Animal constructor.

It's important to note that the subclass must call the superclass constructor using the call method, or the subclass will not have the correct this value and the inheritance may not work as expected.

Example-2: Override an inherited method in subclass

Here's another example that demonstrates how to override an inherited method in a subclass

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name}`);
};

function Cat(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.sayHello = function () {
    console.log(`Meow, my name is ${this.name} and I am a ${this.breed}`);
};

In this example, we define an Animal constructor function with a sayHello method, and a Cat constructor function that is a subclass of Animal. We then override the sayHello method in the Cat subclass to customize the greeting for cats.

Here's how you can use the Cat subclass

const cat = new Cat('Fluffy', 'Siamese');
cat.sayHello();

Output

Meow, my name is Fluffy and I am a Siamese

As you can see, the sayHello method of the Cat object has been successfully overridden to include the breed of the cat.

As you can see, subclassing in JavaScript is a powerful way to create customized objects that inherit the behavior of a superclass. It's a useful tool for organizing and reusing code in object-oriented programs.

Summary

Inheritance is a useful tool for organizing and reusing code in object-oriented programming. By creating a superclass with common behavior, you can create subclasses that inherit that behavior and customize it as needed. This helps you avoid duplication of code and makes it easier to maintain and update your programs.

It's important to note that JavaScript's prototype-based inheritance system is different from the class-based inheritance systems found in languages like Java and C#. However, it can still be used to achieve many of the same goals.