Subclassing in JavaScript | Implementation and Examples

What does subclassing in JavaScript mean? How to implement sublass in JavaScript projects?

In this article, we will explore the concept of subclassing and present how to implement subclass with their example codes.

As developers, we often find ourselves needing to extend or modify existing JavaScript classes to suit our specific needs.

Subclassing JavaScript provides an elegant solution to this requirement, allowing us to create new classes based on existing ones while inheriting their properties and behaviors.

Before we proceed on how to implement subclassing in javascript let’s understand first what is subclassing.

What is subclassing in JavaScript?

Subclassing is a fundamental concept in object-oriented programming that allows developers to create a new class based on an existing one.

The new class, known as a subclass or derived class, inherits the properties and methods of the existing class, known as the superclass or base class.

This enables developers to reuse and extend code, promoting code modularity and maintainability.

Subclassing Syntax and Example

To create a subclass in JavaScript, you use the extends keyword followed by the name of the superclass.

Let’s consider an example to illustrate this concept:

class Animal {
  constructor(name) {
    this.name = name;
  }

  sleep() {
    console.log(`${this.name} is sleeping.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const dog = new Dog("Summer");
dog.sleep(); // Output: Summer is sleeping.
dog.bark(); // Output: Summer is barking.

In this example, we have a superclass Animal with a name property and an sleep() method.

The subclass Dog extends Animal and adds a bark() method. The Dog class inherits the name property and sleep() method from Animal and introduces the bark() method.

How to Implement Subclassing in JavaScript?

Subclassing in JavaScript can be achieved using various techniques.

Let’s explore three popular methods:

1. Using the extends Keyword

As seen in the previous example, we use the extends keyword to create a subclass that inherits from a superclass. This method is the most straightforward and is widely supported in modern JavaScript environments.

2. Using Object.create()

Another approach to subclassing involves using Object.create() to create a prototype chain between the subclass and superclass.

const Books = {
  init: function (title, author) {
    this.title = title;
    this.author = author;
  },

  getInfo: function () {
    return `${this.title} ${this.author}`;
  },
};

const ItBook = Object.create(Books);
ItBook.init = function (title, author, subject) {
  Books.init.call(this, title, author);
  this.subject = subject;
};

ItBook.getSubject = function () {
  return this.subject;
};

const myBooks = Object.create(ItBook);
myBooks.init('Javascript Tutorial', '@itsourcecode', 'Javascript');
console.log(myBooks.getInfo()); 
console.log(myBooks.getSubject()); 

Output:

Javascript Tutorial @itsourcecode
Javascript

In this example, we use Object.create() to create new objects that inherit from the Books and ItBooks objects, respectively.

The init function serves as the constructor for both the Books and ItBooks objects.

3. Using Factory Functions

The third method involves using factory functions to create subclasses. A factory function is a function that returns an object, allowing us to customize its properties and behaviors.

function createBook(author, title) {
  return {
    author,
    title,
    getInfo() {
      return `${this.author} ${this.title}`;
    },
  };
}

function createItBook(author, title, color) {
  const book= createBook(author, title);
  return {
    ...book,
    color,
    getColor() {
      return this.color;
    },
  };
}

const myBook = createItBook('JavaScript Guide', '@itsourcecode', 'Yellow');
console.log(myBook.getInfo()); 
console.log(myBook.getColor()); 

Output:

JavaScript Guide @itsourcecode
Yellow

Here, we define factory functions createBook and createItBook that create and customize objects representing book and color, respectively.

The createItBook function invokes the createBook function and extends its properties and behaviors.

Subclassing JavaScript Advantages

Subclassing JavaScript offers several advantages, such as:

• code reuse
• improved maintainability
• extensibility

It allows developers to build upon existing classes, reducing redundancy and enhancing productivity.

To learn more about JavaScript functions here are other resources you can check out:

• JavaScript Check If String Is Number: Understanding the Basics
• How to remove numbers from string in JavaScript

Conclusion

Subclassing JavaScript is a powerful technique that enables developers to extend and modify existing code, promoting code reuse and maintainability.

In this article, we explored the basics of subclassing, learned about different implementation methods, and discussed its benefits and limitations.

By leveraging subclassing, you can take your JavaScript code to the next level, making it more flexible and adaptable.

Glay Eliver

Programmer & Technical Writer at PIES IT Solution

Glay Eliver is a programmer and writer at PIES IT Solution, author of over 600 tutorials at itsourcecode.com. Specializes in JavaScript tutorials, Microsoft Office how-tos (Excel, Word, PowerPoint), and Python error debugging covering ImportError, TypeError, AttributeError, ModuleNotFoundError, and JavaScript ReferenceError. Authored several of the site’s highest-traffic Excel and MS Office reference articles.

Expertise: JavaScript · MS Excel · MS Word · MS PowerPoint · Python · Python ImportError · Python TypeError · Python AttributeError · ModuleNotFoundError · JavaScript ReferenceError · Pygame
 · View all posts by Glay Eliver →