Skip to main content

Inheritance in JavaScript Classes

JavaScript class inheritance allows you to create a new class based on an existing class, called the parent class or superclass.

The new class, called the child class or subclass, inherits properties and methods from the parent class, and can also add its own properties and methods.

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

The subclass can then define its own constructor and add additional properties and methods as needed.

Here is an example of a subclass that extends a parent Animal class:

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the parent constructor with the name argument
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Rufus");
dog.speak(); // outputs "Rufus barks."

In this example:

  • The Animal class defines a constructor and a speak method.
  • The Dog class extends the Animal class using the extends keyword, and defines its own constructor that calls the parent constructor using the super keyword.
  • The Dog class also overrides the speak method of the parent class to implement its own behavior.

When we create a new instance of the Dog class and call its speak method, it outputs "Rufus barks.", indicating that it is using the speak method defined in the Dog class rather than the one defined in the Animal class.

Getters and Setters With Classes​

Getters and setters are special methods that allow you to get and set the values of class properties, respectively, and are often used to control access to class data.

You can define getters and setters using the get and set keywords, respectively.

Here is an example that demonstrates how to use getters and setters in a class:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    const [firstName, lastName] = name.split(" ");
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const person = new Person("John", "Doe");
console.log(person.fullName); // outputs "John Doe"
person.fullName = "Jane Smith";
console.log(person.firstName); // outputs "Jane"
console.log(person.lastName); // outputs "Smith"
console.log(person.fullName); // outputs "Jane Smith"

In this example:

  • The Person class defines two properties, firstName and lastName, and a getter and setter for a computed property called fullName.
  • The get fullName() method returns the full name of the person by combining the firstName and lastName properties.
  • The set fullName() method takes a name as input, splits it into first and last names, and sets the firstName and lastName properties accordingly.
  • We create a new instance of the Person class and call its fullName getter, it outputs the full name of the person as "John Doe".
  • We call the fullName setter and pass it the value "Jane Smith", it sets the firstName and lastName properties of the person accordingly.
  • We can then call the firstName, lastName, and fullName getters to confirm that the values have been updated.

Where to use JavaScript Class Inheritance​

JavaScript class inheritance can be used in a variety of scenarios where you need to create objects with similar behavior but different characteristics. Some common examples include:

GUI programming​

In GUI programming, you may have multiple buttons that all share the same functionality, but have different visual characteristics. You can create a parent class that defines the behavior of the buttons, and then create child classes that inherit that behavior and add their own unique visual styling.

Game development​

In game development, you may have multiple characters that all share similar behaviors, such as moving, jumping, and attacking. You can create a parent class that defines these behaviors, and then create child classes that inherit those behaviors and add their own unique characteristics, such as different speeds, animations, and attack types.

Backend web development​

In backend web development, you may have multiple database models that all share similar behavior, such as CRUD operations (create, read, update, delete). You can create a parent class that defines these behaviors, and then create child classes that inherit those behaviors and add their own unique characteristics, such as different database schemas or validation rules.