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
Modifying prototypes in JavaScript
In JavaScript, prototypes allow you to add properties and methods to constructor functions. You can modify prototypes even after objects are created, and all existing instances will automatically inherit the changes.
Understanding Prototypes
Every function in JavaScript has a prototype property. When you create objects using a constructor function, they inherit methods and properties from the constructor's prototype.
Example: Modifying Prototypes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifying Prototypes</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 16px;
font-weight: 500;
color: blueviolet;
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Modifying Prototypes in JavaScript</h1>
<div class="result"></div>
<button class="btn">Show Original and Modified Prototype</button>
<p>Click the button to see how modifying a prototype affects existing objects.</p>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
// Constructor function
function Person(name, age, occupation) {
this.name = name;
this.age = age;
this.occupation = occupation;
}
// Original prototype method
Person.prototype.displayInfo = function () {
return `Name: ${this.name}, Age: ${this.age}, Occupation: ${this.occupation}<br>`;
};
// Create instances
let person1 = new Person("Shawn", 20, "Student");
let person2 = new Person("Rohan", 25, "Manager");
btnEle.addEventListener("click", () => {
// Show original prototype behavior
resEle.innerHTML = "<strong>Before Modifying Prototype:</strong><br>" +
person1.displayInfo() + person2.displayInfo() + "<br>";
// Modify the prototype method
Person.prototype.displayInfo = function () {
return `? ${this.occupation} | ${this.name} (Age: ${this.age})<br>`;
};
// Show modified prototype behavior
resEle.innerHTML += "<strong>After Modifying Prototype:</strong><br>" +
person1.displayInfo() + person2.displayInfo();
});
</script>
</body>
</html>
Key Points About Prototype Modification
Dynamic Updates: When you modify a prototype, all existing instances immediately reflect the changes. This is because objects don't store methods directly ? they reference the prototype.
Shared Behavior: All instances of a constructor function share the same prototype object, making prototype modification affect every instance.
Adding New Methods to Existing Prototypes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Methods to Prototype</title>
</head>
<body>
<div id="output"></div>
<script>
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
let car1 = new Car("Toyota", "Camry");
let car2 = new Car("Honda", "Civic");
// Add new method to existing prototype
Car.prototype.getFullName = function() {
return this.brand + " " + this.model;
};
// Add another method
Car.prototype.startEngine = function() {
return this.getFullName() + " engine started!";
};
document.getElementById("output").innerHTML =
car1.getFullName() + "<br>" +
car2.startEngine();
</script>
</body>
</html>
Best Practices
Avoid Modifying Built-in Prototypes: Don't modify prototypes of built-in objects like Array.prototype or Object.prototype as it can cause conflicts.
Use Sparingly: While prototype modification is powerful, overusing it can make code harder to maintain and debug.
Conclusion
Prototype modification in JavaScript allows you to dynamically change behavior of constructor functions, affecting all instances immediately. This powerful feature should be used carefully to maintain clean and predictable code.
225 Views
