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
Super keyword in JavaScript?
In this article, we are going to discuss about the super keyword in JavaScript with suitable examples.
The super keyword is used in JavaScript classes to access properties and methods of a parent class from a child class. It's essential for implementing proper inheritance in object-oriented programming.
When a child class and parent class have methods with the same names, the super keyword helps distinguish between them. The child class must extend the parent class using the extends keyword to use super.
Syntax
The syntax to represent the super keyword is:
super(arguments); // Call parent class constructor super.methodName(arguments); // Call parent class method
Where:
arguments are the parameters passed to the parent class constructor or method.
methodName is the parent class method being called.
Example 1: Calling Parent Constructor
This example shows how to use super to call the parent class constructor:
<!DOCTYPE html>
<html>
<head>
<title>Super keyword - Constructor</title>
</head>
<body>
<script>
class Person {
constructor(person_name) {
this.name = person_name;
}
getPersonName() {
return this.name;
}
}
class Aadhar extends Person {
constructor(person_name, AadharID) {
super(person_name); // Call parent constructor
this.AadharID = AadharID;
}
showAadharId() {
return 'The Aadhar ID for ' + this.getPersonName() + ' is: ' + this.AadharID;
}
}
var person_id = new Aadhar('Rajesh', '5000 0000 0000 0000');
document.write(person_id.showAadharId());
</script>
</body>
</html>
The Aadhar ID for Rajesh is: 5000 0000 0000 0000
Example 2: Calling Parent Methods
This example demonstrates how to use super to call parent class methods:
<!DOCTYPE html>
<html>
<head>
<title>Super keyword - Methods</title>
</head>
<body>
<p id="result"></p>
<script>
class Person {
constructor(person_name) {
this.name = person_name;
}
getPersonName() {
return 'The person name is: ' + this.name;
}
}
class Employee extends Person {
constructor(person_name, PANID) {
super(person_name); // Call parent constructor
this.PANID = PANID;
}
show_PAN_CARD_ID() {
return super.getPersonName() + ' and the PAN Card ID is: ' + this.PANID;
}
}
var employee = new Employee('Ravi', 'DD JJN 7854 A');
document.getElementById('result').innerHTML = employee.show_PAN_CARD_ID();
</script>
</body>
</html>
The person name is: Ravi and the PAN Card ID is: DD JJN 7854 A
Key Points
super() must be called before using this in a child constructor
super can only be used in classes that extend another class
Use super.methodName() to call parent methods from child methods
The super keyword helps avoid method name conflicts between parent and child classes
Conclusion
The super keyword is essential for proper inheritance in JavaScript classes. It allows child classes to access parent constructors and methods while maintaining clean object-oriented design.
1K+ Views
