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
Share methods in JavaScript
Methods can be shared across multiple object instances by attaching them to the prototype property. This approach ensures all instances of a constructor function share the same method, making memory usage more efficient than defining methods inside the constructor.
Basic Prototype Method Sharing
When you define a method on the prototype, all instances created from that constructor function can access it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shared Methods</title>
</head>
<body>
<h1>Shared Methods in JavaScript</h1>
<div id="result"></div>
<button onclick="showStudentInfo()">Show Student Info</button>
<script>
function Student(name, age, standard) {
this.name = name;
this.age = age;
this.standard = standard;
}
// Shared method attached to prototype
Student.prototype.displayInfo = function() {
return `${this.name} (Age: ${this.age}, Standard: ${this.standard})`;
};
let student1 = new Student("Rohan", 17, 12);
let student2 = new Student("Shawn", 16, 11);
function showStudentInfo() {
document.getElementById("result").innerHTML =
student1.displayInfo() + "<br>" + student2.displayInfo();
}
</script>
</body>
</html>
Output
Rohan (Age: 17, Standard: 12) Shawn (Age: 16, Standard: 11)
Multiple Shared Methods
You can add multiple methods to the prototype to share various functionalities:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shared Methods</title>
</head>
<body>
<div id="output"></div>
<button onclick="demonstrateMethods()">Test Methods</button>
<script>
function Car(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
}
// Multiple shared methods
Car.prototype.getInfo = function() {
return `${this.year} ${this.brand} ${this.model}`;
};
Car.prototype.getAge = function() {
return new Date().getFullYear() - this.year;
};
Car.prototype.start = function() {
return `${this.brand} ${this.model} is starting...`;
};
function demonstrateMethods() {
let car1 = new Car("Toyota", "Camry", 2020);
let car2 = new Car("Honda", "Civic", 2018);
let output = car1.getInfo() + " (Age: " + car1.getAge() + " years)<br>";
output += car2.getInfo() + " (Age: " + car2.getAge() + " years)<br>";
output += car1.start() + "<br>";
output += car2.start();
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
Method vs Instance Property
Here's a comparison showing why prototype methods are more efficient:
| Approach | Memory Usage | Performance | Method Sharing |
|---|---|---|---|
| Prototype Method | Low - one copy shared | High | Yes - all instances share |
| Instance Method | High - copy per instance | Lower | No - separate copies |
Key Points
- Prototype methods are shared across all instances, saving memory
- Methods defined on prototype can access instance properties using
this - All instances inherit prototype methods automatically
- Prototype methods can be added after object creation
Conclusion
Using prototype to share methods is the standard approach in JavaScript for efficient memory usage. All instances inherit these methods while maintaining access to their individual properties through the this keyword.
697 Views
