Difference between JavaScript's Prototypal Inheritance and Traditional Inheritance

Aditya SinghAditya Singh
2 min read

JavaScript (JS) has a special way for objects to share traits. It might sound like inheritance, a concept from other languages, but it works differently.

In JS, objects can link to another object to access methods or properties. This is called prototypal inheritance or behavior delegation. it's simply object linking to another object which is capable of handling methods or property which the current object does not have.

This linking system is a natural fit for how JS works and avoids the confusion of forcing inheritance on it.

Prototypal versus Traditional Inheritance Think Blueprints vs. Recipes

Traditional Inheritance:

  • Like following a blueprint (class) to build objects (houses).

  • Clear parent-child relationships between objects.

  • Inherits a complete copy of features.

Prototypal Inheritance (JavaScript):

  • Like borrowing from a recipe (prototype) for new variations (objects).

  • Objects links Objects, does not copy.

  • Creates a chain of objects for sharing features. ( Prototype chain )

In a nutshell:

Traditional: Copy the whole plan (blueprint). Prototypal: Links features from a base recipe (prototype).

Understanding How Prototypal Inheritance Occurs in Practice

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

Animal.prototype.makeSound = function() {
  console.log('Generic animal sound');
};

function Dog(name, breed) {
  this.breed = breed;
  // Inheriting properties from Animal
}

Dog.prototype = Object.create(Animal.prototype); // Setting the prototype chain

const fido = new Dog('Fido', 'Golden Retriever');
fido.makeSound(); // Outputs: 'Generic animal sound' (inherited)

In this example, the Animal function serves as a constructor for animal objects. It defines a makeSound method on its prototype (Animal.prototype). The Dog constructor creates dog objects, and we explicitly set its prototype chain to inherit from Animal.prototype using Object.create(). This enables Dog instances (like fido) to access and utilize the makeSound method defined on the Animal prototype.

Conclusion

By embracing the concept of prototypal inheritance, you can write cleaner, more maintainable JavaScript code. Objects leverage the functionalities defined in linked prototypes, promoting code reuse and reducing redundancy. This approach also offers more flexibility in object creation compared to traditional inheritance hierarchies.

I'm still learning, so please let me know in the comments if there is anything I missed or if you think something is wrong, Thanks for reading.

0
Subscribe to my newsletter

Read articles from Aditya Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Aditya Singh
Aditya Singh

Hi there! I'm a frontend developer with a passion for creating beautiful and intuitive user interfaces. I love being able to combine my creative side with my technical skills to bring unique ideas to life. When I'm not coding, you can usually find me behind the lens of my camera, exploring the world of photography. I believe that creativity is an essential part of both my personal and professional life, and I'm constantly striving to find new ways to express it.