Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How does JavaScript .prototype work?
In JavaScript, every function has a prototype property that serves as a template for creating objects. Understanding prototypes is essential for mastering JavaScript's object-oriented programming capabilities and inheritance patterns.
What is a Prototype?
A prototype is an object that exists on every function in JavaScript. When you create objects using constructor functions, they inherit properties and methods from the function's prototype. This enables code reusability and efficient memory usage.
Consider creating multiple objects with similar properties:
<html>
<head>
<title>Basic Object Creation</title>
</head>
<body>
<h3>Creating Objects Without Prototype</h3>
<script>
let basic = document.getElementById("basic");
// Creating objects individually (inefficient)
let user1 = {
name: "Alice",
greet: function() { return "Hello, I'm " + this.name; }
};
let user2 = {
name: "Bob",
greet: function() { return "Hello, I'm " + this.name; }
};
basic.innerHTML = user1.greet() + "<br>" + user2.greet();
</script>
</body>
</html>
Hello, I'm Alice Hello, I'm Bob
Constructor Functions and Prototypes
Constructor functions combined with prototypes provide a better approach for creating multiple similar objects:
Syntax
function ConstructorName(parameters) {
this.property = value;
}
ConstructorName.prototype.methodName = function() {
// method implementation
};
let instance = new ConstructorName(arguments);
Example: Using Constructor with Prototype
<html>
<head>
<title>Constructor Function with Prototype</title>
</head>
<body>
<h3>Creating Objects with Constructor and Prototype</h3>
<script>
let constructorDiv = document.getElementById("constructor");
// Constructor function
function User(name, age) {
this.name = name;
this.age = age;
}
// Adding methods to prototype
User.prototype.greet = function() {
return "Hello, I'm " + this.name;
};
User.prototype.getAge = function() {
return "I am " + this.age + " years old";
};
// Creating instances
let user1 = new User("Alice", 25);
let user2 = new User("Bob", 30);
constructorDiv.innerHTML =
user1.greet() + "<br>" +
user1.getAge() + "<br>" +
user2.greet() + "<br>" +
user2.getAge();
</script>
</body>
</html>
Hello, I'm Alice I am 25 years old Hello, I'm Bob I am 30 years old
How Prototype Inheritance Works
When you access a property or method on an object, JavaScript first looks for it on the object itself. If not found, it looks up the prototype chain:
<html>
<head>
<title>Prototype Chain Example</title>
</head>
<body>
<h3>Prototype Chain and Property Lookup</h3>
<script>
let chainDiv = document.getElementById("chain");
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return this.name + " makes a sound";
};
Animal.prototype.species = "Unknown";
let dog = new Animal("Buddy");
dog.species = "Canine"; // Override prototype property
let cat = new Animal("Whiskers");
// cat.species will use prototype value
chainDiv.innerHTML =
dog.speak() + "<br>" +
"Dog species: " + dog.species + "<br>" +
cat.speak() + "<br>" +
"Cat species: " + cat.species + "<br>" +
"Prototype species: " + Animal.prototype.species;
</script>
</body>
</html>
Buddy makes a sound Dog species: Canine Whiskers makes a sound Cat species: Unknown Prototype species: Unknown
Adding Properties to Existing Prototypes
You can add methods to prototypes even after objects have been created:
<html>
<head>
<title>Dynamic Prototype Addition</title>
</head>
<body>
<h3>Adding Methods to Existing Prototypes</h3>
<script>
let dynamicDiv = document.getElementById("dynamic");
function Person(name) {
this.name = name;
}
let person1 = new Person("John");
// Add method after object creation
Person.prototype.introduce = function() {
return "My name is " + this.name;
};
let person2 = new Person("Jane");
// Both objects can use the new method
dynamicDiv.innerHTML =
person1.introduce() + "<br>" +
person2.introduce();
</script>
</body>
</html>
My name is John My name is Jane
Benefits of Using Prototypes
| Aspect | Without Prototype | With Prototype |
|---|---|---|
| Memory Usage | Each object has its own copy of methods | Methods shared across all instances |
| Code Reusability | Methods must be redefined for each object | Methods defined once on prototype |
| Dynamic Updates | Cannot update existing objects easily | Can add methods to all instances at once |
Conclusion
JavaScript prototypes enable efficient object creation and inheritance by allowing objects to share methods and properties. This reduces memory usage and provides a foundation for JavaScript's prototypal inheritance system, making it essential for scalable application development.
490 Views
