? JavaScript Inheritance

⚡ Quick Overview

Inheritance lets one object or class reuse the properties and methods of another. In JavaScript this is implemented through the prototype chain and, in modern code, the class and extends keywords. It helps you build reusable, organized object hierarchies.

? Key Concepts

• Prototypal inheritance – objects inherit directly from other objects via the prototype chain.
• Constructor functions – pre-ES6 way to define “types” and share methods via Function.prototype.
• Class-based syntax – ES6 class, extends, and instance methods provide a cleaner syntax over prototypes.
• super keyword – used inside subclasses to call parent constructors and methods.
• Reusability – define common behavior once in a base type and reuse it across children.

? Syntax & Theory

Every JavaScript object has an internal link to another object called its prototype. When you access a property or method, JavaScript first looks on the object itself, then walks up the prototype chain until it finds it.

ES6 class syntax is syntactic sugar over this prototypal model. A class body defines a constructor and methods that are actually stored on ClassName.prototype. The extends keyword links the prototype of the child class to the prototype of the parent class.

The super keyword lets child classes delegate work back to the parent class, such as initializing shared fields or reusing parent logic from overridden methods.

? Code Examples

?️ Prototypal Inheritance with Object.create()

Here, child inherits directly from parent using the prototype chain.

const parent = {
  greet() {
    console.log("Hello from parent");
  }
};

const child = Object.create(parent);
child.greet(); // Hello from parent

? Constructor Function Inheritance (Pre-ES6)

Before classes, constructor functions plus prototypes were the main pattern for inheritance.

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

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

function Dog(name) {
  // Call parent constructor with current context
  Animal.call(this, name);
}

// Inherit from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

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

const d = new Dog("Rex");
d.speak(); // Rex barks.

? Class-Based Inheritance (ES6+)

ES6 classes give a more familiar OOP syntax, but they still use prototypes under the hood.

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

  speak() {
    console.log(this.name + " makes a sound.");
  }
}

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

const dog = new Dog("Buddy");
dog.speak(); // Buddy barks.

? Using super in a Subclass

super lets you call parent constructors and methods from within a child class.

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  move() {
    console.log(this.type + " is moving");
  }
}

class Car extends Vehicle {
  constructor(type, brand) {
    super(type); // Call parent constructor
    this.brand = brand;
  }

  move() {
    super.move(); // Call parent method
    console.log(this.brand + " car drives smoothly");
  }
}

const car = new Car("Vehicle", "Toyota");
car.move();
// Vehicle is moving
// Toyota car drives smoothly

? Live Output & Explanation

? Use Cases & When to Use Inheritance

• When multiple types share common properties or behavior (e.g., Animal → Dog, Cat).
• When you want a clear “is-a” relationship between entities (e.g., Car is a Vehicle).
• When extending built-in types, such as class MyArray extends Array to add custom helpers.
• When you need to reuse and specialize logic rather than duplicate it in multiple places.

?️ Interactive Example

Click the button to create a Dog that inherits from Animal and see the overridden speak() method in action.