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
How to override derived properties in JavaScript?
In JavaScript, when an object inherits properties from its prototype, you can override those inherited properties by assigning new values directly to the child object. This creates own properties that shadow the prototype properties.
Understanding Property Inheritance
When you create an object using Object.create(), the new object inherits properties from its prototype. These inherited properties can be overridden by setting properties directly on the derived object.
Example: Overriding Derived Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Override Derived Properties</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result, .sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>Override Derived Properties</h1>
<div class="sample">Before overriding:<br></div>
<br>
<div class="result">After overriding:<br></div>
<br>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to override the properties</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
// Create a prototype object
let objPerson = {
name: "Rahul",
age: 12,
class: 7
};
// Create a derived object that inherits from objPerson
let Person1 = Object.create(objPerson);
// Display inherited properties
sampleEle.innerHTML += "Person1.name = " + Person1.name + "<br>";
sampleEle.innerHTML += "Person1.age = " + Person1.age + "<br>";
sampleEle.innerHTML += "Person1.class = " + Person1.class + "<br>";
BtnEle.addEventListener("click", () => {
// Override the inherited properties
Person1.name = "Shawn";
Person1.age = 18;
Person1.class = 12;
// Display overridden properties
resEle.innerHTML += "Person1.name = " + Person1.name + "<br>";
resEle.innerHTML += "Person1.age = " + Person1.age + "<br>";
resEle.innerHTML += "Person1.class = " + Person1.class + "<br>";
});
</script>
</body>
</html>
How Property Overriding Works
Here's a simplified example showing the concept:
// Create prototype object
let parent = {
name: "Parent Name",
getValue: function() {
return "Original value";
}
};
// Create derived object
let child = Object.create(parent);
console.log("Before override:");
console.log("child.name:", child.name);
console.log("child.getValue():", child.getValue());
// Override properties
child.name = "Child Name";
child.getValue = function() {
return "Overridden value";
};
console.log("\nAfter override:");
console.log("child.name:", child.name);
console.log("child.getValue():", child.getValue());
// Original prototype remains unchanged
console.log("\nParent object unchanged:");
console.log("parent.name:", parent.name);
Before override: child.name: Parent Name child.getValue(): Original value After override: child.name: Child Name child.getValue(): Overridden value Parent object unchanged: parent.name: Parent Name
Key Points
- Overriding creates own properties on the derived object
- Original prototype properties remain unchanged
- Own properties take precedence over inherited ones
- You can override both data properties and methods
Conclusion
Property overriding in JavaScript allows derived objects to customize inherited behavior while preserving the original prototype. This provides flexibility in object-oriented programming patterns.
Updated on: 2026-03-15T23:18:59+05:30
392 Views
Advertisements