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

Question

This question explores JavaScript and addresses practical considerations related to: What is the difference between class-based and prototype-based inheritance in JavaScript?

Q&A Network · Accepted Answer

JavaScript supports both class-based and prototype-based inheritance, but they are implemented differently. Class-based inheritance uses the "class" keyword, while prototype-based inheritance relies on objects and prototypes directly.

// Class-based inheritance
        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.

// Prototype-based inheritance
        function AnimalProto(name) {
            this.name = name;
        }

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

function DogProto(name) {
            AnimalProto.call(this, name);
        }

DogProto.prototype = Object.create(AnimalProto.prototype);
        DogProto.prototype.constructor = DogProto;

DogProto.prototype.speak = function() {
            console.log(`${this.name} barks.`);
        };

const dogProto = new DogProto('Buddy');
        dogProto.speak(); // Buddy barks.

ADDITIONAL COMMENT:
- Class-based inheritance uses the "class" and "extends" keywords, making it more syntactically similar to other object-oriented languages.
- Prototype-based inheritance uses constructor functions and the "prototype" property to achieve inheritance.
- Both approaches ultimately rely on JavaScript's prototype chain, but classes provide a more intuitive syntax.
- In ES6+, class-based syntax is preferred for its readability and ease of use.

✅

Ask any question about JavaScript here... and get an instant response.

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

Asked on Jul 25, 2025

Answer

Real Questions. Clear Answers.