Inheritance in JavaScript allows us to inherit the properties and methods from one class to another. A child class gains all the features of its parent class and adds its own features too. The main purpose of using inheritance is to make the code reusable from the parent class.
JavaScript Class Inheritance basics
Inheritance means one class can use the properties and methods of another class. With the help of inheritance we can transfer the properties and methods of one class to another class. The child class will have whatever you have created inside the parent class, and it can also define its own properties and methods.
If you want to connect this class syntax to how prototypes work under the hood, see the
prototype chain in JavaScript.
JavaScript Class Inheritance syntax
In inheritance we first create a
parent class and then we create a
child class in which we want to inherit the properties. To inherit the properties of the parent class we write the
extends keyword and then the name of the class from which we want to inherit.
// Parent class
class ParentClass {
// properties and methods here
}
// Child class inheriting from ParentClass
class ChildClass extends ParentClass {
// child-specific properties and methods here
}
Whatever the properties and methods you set in the parent class get transferred to the child class by using `extends ParentClass`. This is the basic syntax of using inheritance.
For a quick refresh on core language basics you often use around classes, see this guide to the
typeof operator in JavaScript.
Example: Animal and Dog
Imagine we have a general class of animal and we want to make a specific class of dog. All dogs are animals, so a dog is a child of animal. That is the example we are going to use.
Parent class
Create a parent class named `Animal`. Inside this class, define a constructor that takes a `name` and stores it.
Create a method `speak` that returns a statement that the animal makes a sound.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} makes a sound`;
}
}
Child class
Create a child class `Dog` that inherits from `Animal` using
extends. Inside it, you can create your own properties and methods too. Whatever you have created inside the parent class is now present inside this `Dog` class as well.
Add a `bark` method that returns how the dog speaks.
class Dog extends Animal {
bark() {
return `${this.name} says woof`;
}
}
Instantiation and method calls
Create an object using the child class. Even if you have not created a constructor for `Dog`, it will still accept the argument because the constructor written inside `Animal` is now part of the `Dog` class.
const dog1 = new Dog('Tommy');
// Method from the parent class
console.log(dog1.speak()); // Tommy makes a sound
// Method from the child class
console.log(dog1.bark()); // Tommy says woof
`dog1` is having both the properties of the child and the parent class.
You can create more objects with the same class. All those objects will have the same features that you put inside these classes.
const dog2 = new Dog('Shiru');
console.log(dog2.speak()); // Shiru makes a sound
console.log(dog2.bark()); // Shiru says woof
As you build class-based features, you will often coordinate behavior over time. For timing patterns, see this practical guide to
JavaScript timers with setInterval.
Final thoughts
We created a
parent class and a
child class, used
extends to inherit properties and methods, and verified that objects of the child class can access both parent methods like `speak` and their own methods like `bark`. This is how you make code reusable with
JavaScript Class Inheritance, and this is how you use it in practice.
