---
title: "Prototypal Inheritance vs. Class-Based Inheritance in JavaScript"  
description: "Objects in JavaScript inherit properties through the prototype chain, enabling dynamic object behavior and composition."  
author: "Ashutosh Patel"  
published: 2024-06-26  
updated: 2024-06-26  
canonical: https://www.mindstick.com/articles/336238/prototypal-inheritance-vs-class-based-inheritance-in-javascript  
category: "javascript"  
tags: ["javascript", "javascript object", "inheritance"]  
reading_time: 3 minutes  

---

# Prototypal Inheritance vs. Class-Based Inheritance in JavaScript

#### JavaScript Prototypal Inheritance vs Class-Based Inheritance

There are two main models for [inheritance](https://www.mindstick.com/articles/1810/objective-c-inheritance) in JavaScript- prototypical inheritance and class-based inheritance (introduced in **ES6**).

[comparison](https://www.mindstick.com/articles/23182/comparison-maruti-suzuki-celerio-v-s-tata-tiago) between them are as given below,

#### Prototypal Inheritance

Objects in JavaScript inherit through prototype chains, enabling [dynamic object](https://www.mindstick.com/forum/872/how-to-serialize-list-property-of-a-dynamic-object) behavior and programming.

**Prototype Chain**\
Every object in JavaScript has an internal property called [[Prototype]] (usually accessed via `__proto__` or `Object.getPrototypeOf())`. When you access a property or method on an object, JavaScript checks the object itself first. If no property or method is found, it searches at the object's prototype (its [[Instance]]), and continues up the chain until it finds it or reaches the end (where the instance is `null`).

**[Constructor Functions](https://www.mindstick.com/forum/160067/constructor-functions-in-javascript)**\
Objects are created through constructor functions or directly with object literals (`{}`). In a traditional object-oriented framework, constructors and functions can be [thought of as](https://answers.mindstick.com/qa/39521/who-thought-of-as-a-pioneer-of-economic-nationalism) classes, but they are primarily used to define and initialize objects and their instances

**Inheritance**\
Inheritance is achieved by inserting a pattern of an object into another object. This can be done with `Object.create()` or by directly modifying the `__proto__` property (although this is not recommended for production code due to potential performance and [compatibility](https://www.mindstick.com/blog/303291/best-practices-for-working-with-host-apis-security-compatibility-and-performance-considerations) issues).

## Example-

```javascript
// Constructor function
function Animal(name) {
   this.name = name;
}
// Adding method to prototype
Animal.prototype.makeSound = function() {
   console.log('Animal sound');
};
// Creating instances
let dog = new Animal('Dog');
dog.makeSound(); // Outputs: Animal sound
```

#### Class-Based Inheritance (ES6 and later)

ES6 provides classes for defining and extending objects in JavaScript, simplifying inheritance management.

## Class Syntax

Classes introduced in **ES6** provide a familiar syntax for defining and inheriting objects, similar to languages ​​like **Java** or **C++**. Under the hood, classes in JavaScript still use prototype inheritance.\

## Constructor and Methods

Courses are declared using the course keyword. They have a constructor method to start with and can have additional methods defined in their bodies.\

## Inheritance

They are inherited using the **extends** keyword. A subclass inherits from the superclass by using the [super keyword](https://www.mindstick.com/articles/1744/super-keyword-in-java) to invoke the superclass constructor and the access method.

## Example-

```javascript
// Class syntax
class Animal {
   constructor(name) {
       this.name = name;
   }
   makeSound() {
       console.log('Animal sound');
   }
}
// Subclass
class Dog extends Animal {
   constructor(name) {
       super(name); // Call the superclass constructor
   }
   // Can override methods
   makeSound() {
       console.log('Bark');
   }
}
// Creating instances
let dog = new Dog('Dog');
dog.makeSound(); // Outputs: Bark
```

#### Comparison

**Syntax-** Classes provide a structured and readable way to describe objects and properties, especially for developers familiar with class-based languages.

**Underlying Mechanism-** Despite syntax [differences](https://yourviews.mindstick.com/view/85280/comparative-differences-dell-vs-hp-which-one-is-better), JavaScript relies on prototype inheritance and class-based inheritance and ultimately prototype chaining

**Flexibility-** Allows for more dynamic [processing](https://www.mindstick.com/forum/12859/how-to-processing-textual-inputs-in-the-client-side) and runtime flexibility from prototype assets. The classes tend to provide syntactic sugar rather than inheritance but are more rigorous in structure and semantics.

**Also, Read:** [Explain the JavaScript Arrays](https://www.mindstick.com/articles/336228/explain-the-javascript-arrays)

---

Original Source: https://www.mindstick.com/articles/336238/prototypal-inheritance-vs-class-based-inheritance-in-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.