JavaScript > Prototypes and Inheritance > Constructor Functions and Classes > Class inheritance (extends)
Extending Classes in JavaScript
Learn how to create new classes based on existing ones using the extends
keyword in JavaScript. This example demonstrates class inheritance, allowing you to reuse and extend functionality from parent classes.
Introduction to Class Inheritance
Class inheritance is a fundamental concept in object-oriented programming (OOP) that allows you to create new classes (child classes or subclasses) based on existing classes (parent classes or superclasses). The child class inherits properties and methods from the parent class and can also add its own properties and methods or override inherited ones. In JavaScript, the extends
keyword is used to implement class inheritance.
Basic Class Inheritance Example
In this example, we define a parent class Animal
with a constructor and a speak
method. We then create a child class Dog
that inherits from Animal
using the extends
keyword. The Dog
class has its own constructor, which calls the parent class constructor using super(name)
. It also overrides the speak
method and adds a new method wagTail
. The output shows how the child class inherits and overrides methods from the parent class.
// Parent class
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
// Child class inheriting from Animal
class Dog extends Animal {
constructor(name, breed) {
super(name); // Call the parent class constructor
this.breed = breed;
}
speak() {
console.log(`${this.name} barks.`); // Override the speak method
}
wagTail() {
console.log(`${this.name} wags its tail.`);
}
}
// Creating instances
const animal = new Animal('Generic Animal');
animal.speak(); // Output: Generic Animal makes a sound.
const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Output: Buddy barks.
dog.wagTail(); // Output: Buddy wags its tail.
The super()
Keyword
The super()
keyword is crucial in class inheritance. It is used to call the constructor of the parent class. When a child class has a constructor, it must call super()
before accessing this
. super()
can also be used to call methods of the parent class from within the child class.
Concepts Behind the Snippet
This snippet showcases the core concepts of class inheritance: Dog
class inherits properties and methods from the Animal
class.extends
keyword establishes the inheritance relationship.super()
keyword allows the child class to call the parent class's constructor and methods.
Real-Life Use Case
Class inheritance is useful in scenarios where you have a hierarchy of objects with shared properties and behaviors. For example, you might have a base class Vehicle
and subclasses like Car
, Truck
, and Motorcycle
. Each subclass inherits common properties like make
, model
, and year
, but can also have its own specific properties and methods like numberOfDoors
for Car
or cargoCapacity
for Truck
.
Best Practices
super()
Correctly: Always call super()
in the child class constructor before accessing this
.
Interview Tip
When discussing class inheritance in an interview, be prepared to explain the benefits of inheritance, such as code reuse and improved organization. Also, be ready to discuss the trade-offs, such as increased complexity and potential for tight coupling. The difference between overriding and overloading is an important concept to master.
When to Use Them
Use class inheritance when:Dog
'is a' Animal
).
Memory Footprint
Inheritance can potentially increase the memory footprint of your application, especially with deep inheritance hierarchies. Each instance of a child class contains all the properties and methods of its parent classes. However, the memory overhead is usually negligible compared to the benefits of code reuse and organization.
Alternatives
Alternatives to class inheritance include:
Pros
Cons
FAQ
-
What is the difference between
extends
andsuper()
in JavaScript?
extends
is used to create a subclass from a parent class, inheriting its properties and methods.super()
is used within the subclass's constructor to call the constructor of the parent class and initialize its properties. It must be called before accessingthis
in the subclass constructor. -
Can a class inherit from multiple classes in JavaScript?
No, JavaScript does not support multiple inheritance in the traditional sense. A class can only inherit directly from one parent class usingextends
. However, you can achieve similar results using composition or mixins. -
What is method overriding?
Method overriding is when a subclass provides its own implementation of a method that is already defined in its parent class. When the method is called on an instance of the subclass, the subclass's implementation is executed instead of the parent class's implementation.