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
.