Inheritance in JavaScript

Hello! In this guide, we'll explore how inheritance works in JavaScript. Inheritance is a core concept in object-oriented programming (OOP) and allows one class to inherit properties and methods from another. JavaScript, being a prototype-based language, implements inheritance through prototypes. Let’s dive in!

Video Explanation​

Watch

1. Prototypal Inheritance​

JavaScript objects have a special hidden property called [[Prototype]], which is either null or references another object. This object is referred to as the prototype. When trying to access a property on an object, JavaScript will first look for it on the object itself. If it's not found, it will look for the property in the prototype chain.

Example:

let animal = {
  eats: true,
};

let rabbit = {
  jumps: true,
};

rabbit.__proto__ = animal; // Set animal as the prototype of rabbit

console.log(rabbit.eats); // true (inherited from animal)
console.log(rabbit.jumps); // true (own property)

Output:​

true
true

2. Using Object.create()​

The Object.create() method creates a new object with the specified prototype object and properties.

Example:​

let animal = {
  eats: true,
};

let rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(rabbit.eats); // true (inherited from animal)
console.log(rabbit.jumps); // true (own property)

Output:​

true
true

3. ES6 Classes and Inheritance​

In ES6, JavaScript introduced the class syntax, which is a more convenient way to work with inheritance.

3.1 Defining Classes​

Classes are defined using the class keyword, and inheritance is established using the extends keyword.

Example:​

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

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

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

Output:​

Rex barks.

3.2 Super Keyword​

The super keyword is used to call the constructor or methods of the parent class.

Example:​

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

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

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

  speak() {
    super.speak(); // Call parent method
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Rex", "Labrador");
dog.speak();

Output:​

Rex makes a noise.
Rex barks.

4. Checking Inheritance​

You can check if an object inherits from another object using the instanceof operator or the isPrototypeOf() method.

4.1 Using instanceof​

The instanceof operator checks if an object is an instance of a class.

Example:​

class Animal {}
class Dog extends Animal {}

let dog = new Dog();

console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true

Output:​

true
true
true

4.2 Using isPrototypeOf()​

The isPrototypeOf() method checks if an object exists in another object's prototype chain.

Example:​

let animal = {};
let rabbit = Object.create(animal);

console.log(animal.isPrototypeOf(rabbit)); // true

Output:​

true

5. Overriding Methods​

In JavaScript, a subclass can override the methods of its superclass. This is often done to provide specialized behavior.

Example:​

class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

let dog = new Dog();
dog.speak(); // Dog barks (method overridden)

Output:​

Dog barks

6. Static Methods and Properties​

JavaScript classes can also have static methods and properties, which are called on the class itself, not on instances.

Example:​

class Animal {
  static category = "Mammal";

  static info() {
    console.log("Animals are multicellular organisms.");
  }
}

console.log(Animal.category); // Mammal
Animal.info(); // Animals are multicellular organisms.

Output:​

Mammal
Animals are multicellular organisms.

JavaScript inheritance, through prototypes or the class syntax, allows for powerful code reuse and logical organization. By mastering inheritance, you can create more flexible and efficient code. Happy coding!