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
How to call the constructor of a parent class in JavaScript?
In JavaScript, when working with inheritance, you often need to call the parent class constructor from the child class. This is accomplished using the super() method, which provides access to the parent's constructor and methods.
What is a Constructor?
A constructor is a special method that runs when creating a new instance of a class. It's used to initialize object properties and set up the object's initial state. In JavaScript, constructors are defined using the constructor keyword within a class.
Inheritance in JavaScript
Inheritance allows objects to access properties and methods from parent objects. Child classes can extend parent classes using the extends keyword, inheriting all parent functionality while adding their own features.
Using super() to Call Parent Constructor
The super() method invokes the parent class constructor. It must be called before using this in the child constructor, and it passes any required parameters to the parent constructor.
Syntax
class ChildClass extends ParentClass {
constructor(param1, param2) {
super(param1); // Call parent constructor
this.childProperty = param2;
}
}
Example 1: Basic Parent Constructor Call
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parent Constructor Call</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
class Parent {
constructor(num1) {
this.num1 = num1;
console.log("Parent constructor called with:", num1);
}
fun() {
console.log("Parent class method call");
}
}
class Child extends Parent {
constructor(num1, num2) {
// Calling parent class constructor
super(num1);
this.num2 = num2;
console.log("Child constructor called with:", num2);
}
fun() {
super.fun(); // Call parent method
console.log("Child class method call");
}
}
let obj = new Child(10, 20);
obj.fun();
console.log("Object properties:", obj.num1, obj.num2);
</script>
</body>
</html>
Parent constructor called with: 10 Child constructor called with: 20 Parent class method call Child class method call Object properties: 10 20
Example 2: Multiple Parameters and Method Inheritance
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Inheritance</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
class Vehicle {
constructor(brand, year) {
this.brand = brand;
this.year = year;
console.log(`Vehicle created: ${brand} (${year})`);
}
start() {
console.log(`${this.brand} vehicle started`);
}
}
class Car extends Vehicle {
constructor(brand, year, model, doors) {
super(brand, year); // Call parent constructor
this.model = model;
this.doors = doors;
console.log(`Car model: ${model}, Doors: ${doors}`);
}
start() {
super.start(); // Call parent method
console.log(`${this.model} engine running`);
}
honk() {
console.log(`${this.brand} ${this.model} goes beep beep!`);
}
}
let myCar = new Car("Toyota", 2022, "Camry", 4);
myCar.start();
myCar.honk();
</script>
</body>
</html>
Vehicle created: Toyota (2022) Car model: Camry, Doors: 4 Toyota vehicle started Camry engine running Toyota Camry goes beep beep!
Key Points
-
super()must be called before usingthisin the child constructor - Pass required parameters from child to parent constructor via
super() - Use
super.methodName()to call parent methods from child classes - Child constructors can add their own properties after calling
super()
Conclusion
The super() method is essential for proper inheritance in JavaScript, allowing child classes to initialize parent properties and extend functionality. Always call super() before using this in child constructors.
2K+ Views
