Table of Contents
🔹 What is Prototype in JavaScript?
In JavaScript, prototype is a built-in mechanism that allows objects to inherit properties and methods from other objects. Every JavaScript function has a special property called prototype
, which is used to implement inheritance.
🔹 Real-Life Analogy: Blueprint of a House 🏠
Imagine a blueprint 🏗️ for building houses. Every house built from the blueprint shares the same structure but can have individual customizations.
- The blueprint is like the prototype in JavaScript.
- The houses built using the blueprint are like JavaScript objects.
- All houses share the same structure but can have custom features.
Similarly, in JavaScript:
- Prototype is a blueprint that objects use to inherit properties and methods.
- Each object can have its own properties but still inherit from the prototype.
🔹 How Prototype Works in JavaScript?
When you try to access a property or method of an object:
- JavaScript first checks if the object has the property/method.
- If it does not exist, JavaScript looks into the prototype chain.
- If the method is found in the prototype, it uses it. Otherwise, it keeps looking up the chain.
🔹 Example: Prototype in Action
// Constructor function function Person(name) { this.name = name; } // Adding a method to the prototype Person.prototype.sayHello = function() { return `Hello, my name is ${this.name}`; }; // Creating new objects const john = new Person("John"); const jane = new Person("Jane"); console.log(john.sayHello()); // Output: Hello, my name is John console.log(jane.sayHello()); // Output: Hello, my name is Jane
✅ Here, sayHello()
is not defined inside john
or jane
, but they can still access it because of the prototype.
🔹 Prototype Chain: Inheritance in JavaScript
JavaScript follows a prototype chain where each object inherits from its prototype until it reaches the root Object.prototype
.
Example of the Prototype Chain:
console.log(john.__proto__); // Points to Person.prototype console.log(Person.prototype.__proto__); // Points to Object.prototype console.log(Object.prototype.__proto__); // null (end of prototype chain)
🚀 Prototype Chain Hierarchy:
john → Person.prototype → Object.prototype → null
🔹 Overriding Prototype Methods
You can override prototype methods if needed:
john.sayHello = function() { return `Hey, I am ${this.name}!`; }; console.log(john.sayHello()); // Output: Hey, I am John! console.log(jane.sayHello()); // Output: Hello, my name is Jane
✅ Here, john has its own method, so it does not use the prototype method.
🔹 Why Use Prototype?
✅ Saves Memory – Methods are shared across all objects, avoiding duplication.
✅ Enables Inheritance – Objects can inherit from other objects.
✅ Allows Extensibility – You can add new methods to existing objects easily.
🔹 Summary
- Prototype is a blueprint from which objects inherit properties and methods.
- Objects look up their prototype chain when accessing properties.
- Prototype helps save memory by sharing methods among multiple objects.
- Prototype chain continues until it reaches
null
.