Difference between JavaScript's Prototypal Inheritance and Traditional Inheritance
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.
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.