JavaScript class inheritance

Use the extends keyword to create a class inheritance in JavaScript. Using class inheritance, a class can inherit all the methods and properties of another class.

JavaScript class inheritance

Simple example code.

<!DOCTYPE html>
<html>
<body>
  <script>
      // parent class
      class Person { 
        constructor(name) {
          this.name = name;
        }

        greet() {
          console.log('Parent class')
          console.log(`Hello ${this.name}`);
        }
      }

    // inheriting parent class
    class Student extends Person {
        msg(){
          console.log('Student class')
        }
    }

    let student1 = new Student('John');
    student1.greet();
    student1.msg();
  </script>
</body>
</html>

Output:

Prototype-based Inheritance:

1. Creating a Base Class: To create a base class, you can define a constructor function and add methods to its prototype. Here’s an example:

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

Animal.prototype.makeSound = function() {
    console.log(this.name + ' makes a sound');
};

2. Creating a Subclass: To create a subclass that inherits from the base class, you can define another constructor function and set its prototype to an instance of the base class. This establishes the inheritance relationship. Here’s an example:

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

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.bark = function() {
    console.log(this.name + ' barks');
};

The Object.create method is used to create a new object with the prototype set to the base class’s prototype.

ES6 Class Syntax:

1. Creating a Base Class: You can use the class syntax to define a base class, which is cleaner and more similar to traditional class-based inheritance:

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

    makeSound() {
        console.log(this.name + ' makes a sound');
    }
}

2. Creating a Subclass: To create a subclass, you can use the extends keyword to inherit from the base class:

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    bark() {
        console.log(this.name + ' barks');
    }
}

In both approaches, you can now create instances of the classes and take advantage of inheritance:

const animal = new Animal('Generic Animal');
const dog = new Dog('Fido', 'Golden Retriever');

animal.makeSound(); // "Generic Animal makes a sound"
dog.makeSound();    // "Fido makes a sound"
dog.bark();         // "Fido barks"

In the ES6 class syntax, the super keyword is used to call the constructor of the base class within the subclass’s constructor. This ensures that the base class’s properties are initialized correctly.

Do comment if you have any doubts or suggestions on this Js inheritance topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript class inheritance | Example code