javascript subclassing

Subclassing in JavaScript | Implementation and Examples

by

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:

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.

Leave a Comment