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
"extends" keyword in JavaScript?
In JavaScript, the extends keyword enables class inheritance, allowing you to create child classes that inherit properties and methods from parent classes. This is a fundamental feature of ES6 classes that promotes code reusability and establishes clear hierarchical relationships between classes.
Class inheritance allows you to build upon existing functionality without rewriting code. The child class automatically gains access to all public methods and properties of its parent class, while still being able to add its own unique features or override inherited behavior.
Syntax
class ChildClass extends ParentClass {
// Child class body
}
class CustomClass extends BuiltInObject {
// Extending built-in objects
}
Basic Inheritance Example
In this example, the Jungle class inherits all methods and properties from the Animal class. The child class gains access to the animalSize() method and name property without redefining them.
<!DOCTYPE html>
<html>
<head>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
</head>
<body>
<script>
class Animal {
constructor(name) {
this.name = name;
}
animalSize() {
document.write(`Elephant is bigger ${this.name}`);
}
}
class Jungle extends Animal {
// Empty class body - inherits everything from Animal
}
let wildAnimal = new Jungle('than Tiger');
wildAnimal.animalSize();
</script>
</body>
</html>
Elephant is bigger than Tiger
Using super Keyword
The super keyword is used within a child class to reference its parent class. When called in a constructor, super() invokes the parent class constructor, ensuring proper initialization of inherited properties.
<!DOCTYPE html>
<html>
<head>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
</head>
<body>
<script>
class Animal {
constructor(name) {
this.name = name;
}
clawSize() {
document.write(`Bear has ${this.name}`);
}
}
class Jungle extends Animal {
constructor(name) {
document.write("Created jungle class<br>");
super(name); // Calls parent constructor
}
}
let wildAnimal = new Jungle('long claws');
wildAnimal.clawSize();
</script>
</body>
</html>
Created jungle class Bear has long claws
Method Overriding
When a child class defines a method with the same name as a parent class method, the child's version overrides the parent's version. This allows customization of inherited behavior while maintaining the same interface.
<!DOCTYPE html>
<html>
<head>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
</head>
<body>
<script>
class Animal {
constructor(name) {
this.name = name;
this.behavior = "aggressive";
}
overrideMethod() {
document.write(`Hello ${this.name}.`);
}
}
class Jungle extends Animal {
constructor(name) {
super(name);
this.behavior = 'Wild'; // Override property
}
overrideMethod() { // Override method
document.write(`Lions are very ${this.name}<br>`);
document.write('Behavior: ' + this.behavior);
}
}
let wildAnimal = new Jungle('Aggressive');
wildAnimal.overrideMethod();
</script>
</body>
</html>
Lions are very Aggressive Behavior: Wild
Static Method Inheritance
The super keyword can also access parent class static methods, allowing child classes to extend or modify static functionality while building upon the parent's implementation.
<!DOCTYPE html>
<html>
<head>
<title>"extends" keyword in JavaScript - TutorialsPoint</title>
</head>
<body>
<script>
class Animal {
constructor() {}
static getInfo() {
return 'I have 4 puppies';
}
}
class Jungle extends Animal {
constructor() {
super();
}
static getInfo() {
return super.getInfo() + ' that are all of same age';
}
}
document.write(Jungle.getInfo());
</script>
</body>
</html>
I have 4 puppies that are all of same age
Key Points
-
extendscreates an inheritance relationship between classes -
super()must be called in child constructors before accessingthis - Child classes inherit all parent methods and properties
- Method overriding allows customization of inherited behavior
- Static methods can also be inherited and overridden
Conclusion
The extends keyword is essential for implementing inheritance in JavaScript classes. It enables code reuse, establishes clear parent-child relationships, and supports method overriding for customized behavior while maintaining a consistent interface.
1K+ Views
