Home » Tutorials » Learn Javascript » Inheritance in JavaScript

Learn Javascript

 Prev

Inheritance in JavaScript

Inheritance in JavaScript allows a child class to take or inherit all the properties and methods from a parent class and also enabling it to add more properties of its own.

In JavaScript, two keywords allow us to use the Inheritance feature:

Inheritance is an important feature among all High Level Object Oriented Programming Languages.

Note: If you are new to Classes, make sure you take a look at our 👉 JavaScript Classes lesson.

Syntax

class Parent_Class {
    // Parent Class Definition
}

class Child_Class extends Parent_Class {
  // Child Class Definition
}

Explanation

Here, the Child_Class is the class which is inheriting or taking all the properties and methods of the Parent_Class.

JavaScript extends keyword 🧵

The extends keyword help us to create a Child_Class which inherits or takes all the properties from a Parent_Class.

Example

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

  whatAreYou() {
    console.log(`Hi, I'm a ${this.name}`);
  }
}

// Using Inheritance, where "Dog" is the child-class and "Animal" is the parent-class.
// Here, "Dog" will inherit or take all the properties that the "Animal" class has.
class Dog extends Animal {
    // Right now, let's leave this block empty
}

// Creating a "Dog" object called "jacky". 
// It automatically uses the parent-class's "constructor()" function to create itself.
const jacky = new Dog("Jacky");

// The "jacky" object has all the properties that "Animal" class has.
console.log(jacky.name);

// The "whatAreYou" method is defined on the parent-class "Animal". 
// Since we used inheritance, any property or method defined in the parent-class can be used by the child-class.
jacky.whatAreYou();

Output

Jacky
Hi, I'm a Jacky

Explanation

  • Dog is the child-class and Animal is the parent-class. Hence, Dog inherits or takes all the available properties from the Animal parent-class.

JavaScript super keyword 💥

Most of times, we want a Child_Class to have it’s own properties in addition to the properties inherited from a Parent_Class. The super keyword enables us to use this feature.

This feature is one of the most exciting features provided by inheritance in JavaScript.

Example (Without the super keyword) ⛔

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

// This code gives error.
class Dog extends Animal {
  constructor(breed) {
    // ERROR: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    this.breed = breed;
  }
}

const jacky = new Dog("German Shepherd");

console.log(jacky.name);
console.log(jacky.breed);

Output

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Example (With the super keyword) ✅

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

class Dog extends Animal {
  constructor(name, breed) {
    // Using the "super()" keyword, we can access the constructor of "Animal" parent-class enabling us to use the "name" property.
    super(name);
    // After using the "super()" keyword, the "Dog" child-class can have properties both from it's parent-class and also it's own.
    // Now, the "Dog" child-class can have it's own property called "breed" in addition to the inherited property "name" from the parent-class "Animal".
    this.breed = breed;
  }
}

// The first argument "Jacky" is used to set the "name" property inherited from the "Animal" parent-class using the parent's constructor.
// The second argument "German Shepherd" is used to set the "breed" property of the "Dog" child-class using it's own constructor.
const jacky = new Dog("Jacky", "German Shepherd");

console.log(jacky.name);
console.log(jacky.breed);

Output

Jacky
German Shepherd

Explanation 🤔

  • We used the super keyword to access the constructor of Animal parent-class.
  • After using the super keyword, the Dog child-class can have properties both from it’s parent-class and also it’s own.
  • Now, the Dog child-class can have it’s own property called breed in addition to the inherited property name from the parent-class Animal.

Override Properties from Inheritance in JavaScript 🤯

We can also override Parent_Class‘s default properties inherited by a Child_Class. This gives the Child_Class full flexibility to customize it’s properties.

Example

class Animal {
  constructor(name) {
    this.name = name;
    // Setting the default value of the "breed" property to "Golden Retriever".
    this.breed = "Golden Retriever";
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
    // Overriding the "breed" property value "Golden Retriever" by "Bulldog".
    this.breed = "Bulldog";
  }
}

// Setting the name property value to "Bruno".
const bruno = new Dog("Bruno");

console.log(bruno.name);
// Displays "Bulldog".
console.log(bruno.breed);

Output

Bruno
Bulldog

Here, the default value of the breed property is overridden from Golden Retriever to Bulldog.

Override Methods from Inheritance in JavaScript 😉

We can also override Parent_Class‘s methods inherited by a Child_Class. This gives the Child_Class full flexibility to customize it’s methods.

Example

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

  makeSounds() {
    console.log("?");
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  // Overriding "makeSounds()" methods to display "Woof!" instead of "?" in the "Dog" child-class.
  makeSounds() {
    console.log("Woof!");
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }

  // Overriding "makeSounds()" methods to display "Meow!" instead of "?" in the "Cat" child-class.
  makeSounds() {
    console.log("Meow!");
  }
}

const jacky = new Dog("Jacky");
const bella = new Cat("Bella");

// Displays "Woof!".
jacky.makeSounds();
// Displays "Meow!".
bella.makeSounds();

Output

Woof!
Meow!

Here, the makeSounds() method is overridden to display Woof! instead of ? in the Dog child-class, whereas Meow! instead of ? in the Cat child-class.

In this way, Inheritance allows us to use a Parent_Class‘s properties and methods in addition to allowing the Child_Class to add it’s own, while getting the full flexibility to override inherited properties and methods.

Next