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
Selected Reading
Shared properties in JavaScript
In JavaScript, properties can be shared across all instances of an object by attaching them to the constructor function's prototype property. This creates a single shared property that all instances can access, rather than each instance having its own copy.
How Prototype Properties Work
When you access a property on an object, JavaScript first checks if the property exists on the instance itself. If not found, it looks up the prototype chain to find the property on the constructor's prototype.
Example: Sharing Properties via Prototype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shared Properties Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 20px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
background: #007acc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Shared Properties in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the button to view properties of student1 and student2 objects</h3>
<script>
let resEle = document.querySelector(".result");
function Student(name, age) {
this.name = name;
this.age = age;
}
// Adding shared property to prototype
Student.prototype.school = "St Marks School";
let student1 = new Student("Rohan", 17);
let student2 = new Student("Shawn", 16);
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = `${student1.name} age ${student1.age} : school: ${student1.school} <br>`;
resEle.innerHTML += `${student2.name} age ${student2.age} : school: ${student2.school}`;
});
</script>
</body>
</html>
Alternative: Using Class Syntax
Modern JavaScript provides class syntax for the same functionality:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class-based Shared Properties</title>
</head>
<body>
<script>
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// Adding shared property to prototype
Student.prototype.school = "St Marks School";
let student1 = new Student("Rohan", 17);
let student2 = new Student("Shawn", 16);
console.log(`${student1.name}: ${student1.school}`);
console.log(`${student2.name}: ${student2.school}`);
</script>
</body>
</html>
Key Benefits
- Memory Efficiency: Only one copy of the shared property exists
- Consistency: All instances access the same value
- Dynamic Updates: Changing the prototype property affects all instances
Modifying Shared Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifying Shared Properties</title>
</head>
<body>
<script>
function Student(name) {
this.name = name;
}
Student.prototype.school = "Original School";
let student1 = new Student("Alice");
let student2 = new Student("Bob");
console.log("Before change:");
console.log(`${student1.name}: ${student1.school}`);
console.log(`${student2.name}: ${student2.school}`);
// Change shared property
Student.prototype.school = "New School";
console.log("After change:");
console.log(`${student1.name}: ${student1.school}`);
console.log(`${student2.name}: ${student2.school}`);
</script>
</body>
</html>
Conclusion
Prototype properties provide an efficient way to share data across all instances of a constructor function. This technique saves memory and ensures consistency while maintaining the flexibility to update shared values dynamically.
Updated on: 2026-03-15T23:18:59+05:30
442 Views
Advertisements