Topic 14024 min readStructured Tutorial

Object-Oriented JavaScript: Understanding Inheritance

Quick Answer

Inheritance in JavaScript allows one object or class to acquire properties and methods from another, enabling code reuse and hierarchical relationships. JavaScript supports inheritance through prototypes and ES6 classes, making it a flexible language for object-oriented programming.

Learning Objectives

Explain the purpose of Inheritance in a practical learning context.
Identify the main ideas, terms, and decisions involved in Inheritance.
Apply Inheritance in a simple real-world scenario or practice task.

Introduction to Inheritance in JavaScript

Inheritance is a fundamental concept in object-oriented programming that allows one object to inherit properties and behaviors from another.

In JavaScript, inheritance enables developers to create more reusable and organized code by establishing relationships between objects or classes.

Inheritance promotes code reuse and establishes a natural hierarchy among objects.

What is Inheritance in JavaScript?

Inheritance allows an object or class to acquire properties and methods from another object or class, reducing code duplication.

JavaScript implements inheritance primarily through prototypes and, more recently, ES6 classes.

Enables code reuse by sharing functionality.
Creates hierarchical relationships between objects.
Supports polymorphism and method overriding.

Prototype-Based Inheritance

JavaScript uses prototypes to implement inheritance. Every object has an internal link to another object called its prototype.

When accessing a property or method, JavaScript looks up the prototype chain until it finds the property or reaches the end.

Objects inherit properties from their prototype.
Prototype chains can be extended dynamically.
Functions have a prototype property used for inheritance.

Example of Prototype Inheritance

Here is an example demonstrating prototype inheritance in JavaScript.

Class-Based Inheritance with ES6

ES6 introduced the class syntax, which provides a clearer and more familiar way to implement inheritance in JavaScript.

Classes use the 'extends' keyword to inherit from a parent class, and the 'super' keyword to call the parent constructor or methods.

Simplifies inheritance syntax compared to prototypes.
Supports constructor inheritance and method overriding.
Improves code readability and maintainability.

Example of Class Inheritance

The following example shows how to create a subclass that inherits from a parent class using ES6 syntax.

Comparing Prototype and Class Inheritance

While ES6 classes provide syntactic sugar, under the hood, JavaScript still uses prototypes for inheritance.

Understanding both approaches helps in writing flexible and efficient JavaScript code.

Prototype vs Class Inheritance
Aspect	Prototype Inheritance	Class Inheritance
Syntax	Uses prototype chains and constructor functions	Uses class and extends keywords
Readability	Less intuitive for beginners	More familiar to developers from other OOP languages
Flexibility	Highly flexible and dynamic	More structured and declarative
Under the Hood	Native JavaScript mechanism	Syntactic sugar over prototypes

Practical Example

This example shows how Dog inherits from Animal using prototypes. Dog overrides the speak method.

This example uses ES6 classes to create a Dog class that inherits from Animal and overrides the speak method.

Examples

Prototype Inheritance Example

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

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

This example shows how Dog inherits from Animal using prototypes. Dog overrides the speak method.

Class Inheritance 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.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

This example uses ES6 classes to create a Dog class that inherits from Animal and overrides the speak method.

Best Practices

Use ES6 classes for clearer and more maintainable inheritance syntax.
Always call the parent constructor when extending classes to initialize inherited properties.
Override methods thoughtfully to extend or modify behavior without breaking the parent contract.
Avoid deep inheritance chains to keep code simple and understandable.
Use composition over inheritance when appropriate for better flexibility.

Common Mistakes

Forgetting to set the constructor property after changing the prototype.
Not calling the parent constructor in subclass constructors.
Overusing inheritance leading to complex and tightly coupled code.
Confusing prototype inheritance with classical inheritance concepts.
Modifying built-in prototypes which can cause unexpected behavior.

Hands-on Exercise

Implement a Vehicle Inheritance Hierarchy

Create a base Vehicle class and extend it with Car and Motorcycle subclasses. Add properties and methods to demonstrate inheritance and method overriding.

Expected output: Instances of Car and Motorcycle should inherit from Vehicle and override methods as needed.

Hint: Use ES6 classes with extends and super keywords.

Prototype Chain Exploration

Create objects using constructor functions and set up prototype inheritance. Log the prototype chain to understand how property lookup works.

Expected output: Clear demonstration of prototype chain traversal.

Hint: Use Object.getPrototypeOf() and console.log to inspect prototypes.

Interview Questions

What is inheritance in JavaScript?

Interview

Inheritance in JavaScript is a mechanism where one object or class can acquire properties and methods from another, enabling code reuse and hierarchical relationships.

How does prototype inheritance work in JavaScript?

Interview

Prototype inheritance works by linking an object to another object's prototype. When a property or method is accessed, JavaScript looks up the prototype chain until it finds it or reaches the end.

What is the difference between prototype inheritance and class inheritance in JavaScript?

Interview

Prototype inheritance uses constructor functions and prototype chains, while class inheritance uses ES6 class syntax with extends and super keywords. Classes are syntactic sugar over prototypes.