JavaScript Classes
extendscreates a class that inherits everything from another class.
The new class gets all the methods of the one it extends.
It can add its own, and replace any it does not want.
Example
javascript
class Animal {
speak() {
return "some sound";
}
}
class Dog extends Animal {}
console.log(new Dog().speak());Dog has no methods of its own but inherits speak.
The class being extended is the parent, or superclass.
The class doing the extending is the child, or subclass.
A child inherits methods and static members, but must call super to inherit setup.
Syntax
javascript
class Child extends Parent {
}A class can extend only one other class.
The child keeps everything and adds more.
Example
javascript
class Animal {
eat() {
return "eating";
}
}
class Dog extends Animal {
fetch() {
return "fetching";
}
}
const dog = new Dog();
console.log(dog.eat() + " and " + dog.fetch());The output is eating and fetching.
Inheritance runs one way only.
Example
javascript
class Animal {}
class Dog extends Animal {
fetch() {
return "fetching";
}
}
console.log(typeof new Dog().fetch);
console.log(typeof new Animal().fetch);The output is function then undefined.
A child class can use its parent's static methods.
Example
javascript
class Base {
static describe() {
return "a base thing";
}
}
class Special extends Base {}
console.log(Special.describe());The static method came along with the rest.
A child can itself be extended.
Keep the chain short; deep hierarchies get hard to follow.
Example
javascript
class Animal {
breathe() {
return "breathing";
}
}
class Dog extends Animal {}
class Puppy extends Dog {}
console.log(new Puppy().breathe());The method was found three levels up.
Inheritance says the child is a kind of the parent.
If it only needs some behaviour, holding an instance is usually clearer.
Example
javascript
class Engine {
start() {
return "engine started";
}
}
class Car {
constructor() {
this.engine = new Engine();
}
start() {
return this.engine.start();
}
}
console.log(new Car().start());A car has an engine; it is not a kind of engine.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Class Inheritance</title>
</head>
<body>
<h1>Class Inheritance</h1>
<p id="out"></p>
<script>
class Animal {
constructor(name) {
this.name = name;
}
describe() {
return this.name + " is an animal";
}
}
class Dog extends Animal {
fetch() {
return this.name + " fetches the ball";
}
}
const rex = new Dog("Rex");
document.getElementById("out").innerHTML =
rex.describe() + "<br>" + rex.fetch();
</script>
</body>
</html>Run the above example in the Try It Editor.
Try another subclass:
Add class Cat extends Animal with its own method.
extends makes one class inherit from another.Inheritance lets shared behaviour be written once.
The parent-child direction is one way, which keeps it predictable.
The next lesson covers super, which the constructor needs.