JavaScript Class Inheritance
Inheritance lets a child class reuse a parent class and add one detail. TeaOrder extends Order. It keeps drink and size, adds extra, and its line is tea / regular / mint.
Not the cookie page
The cookie page ended on theme / dark. A cookie stored browser text. This page builds objects in memory. It also returns to the classes page: constructor prepares a new object, this means that object, and a method belongs to the class.
The parent owns the common fields
Order takes drink and size. Its label method knows the shared two-part line. Every child can use that method unless it needs different behavior.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
The log is tea / regular. order instanceof Order is true. The method is on Order.prototype, not copied into every order.
The child calls super first
extends Order connects the child to the parent. In a child constructor, super(drink, size) must run before this.extra = extra. super prepares the parent part of this new TeaOrder.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
The logs are tea, then mint. Put this.extra before super and the constructor throws ReferenceError: a child has no usable this until the parent constructor has run.
Override, then reuse
The child can replace label. super.label() calls the parent version, so the child does not repeat the drink-and-size work. It adds only the extra.
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
The log is tea / regular / mint. The child still passes instanceof Order, and it also passes instanceof TeaOrder. That is reuse, not a copy of the parent object.
A small family
Order is the parent. TeaOrder is the child. The parent handles what every order needs; the child handles what only tea orders need. Do not make a child just to rename one value.
The line
The page makes a TeaOrder and calls its overridden label.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
The line reads tea / regular / mint. theme / dark was the cookie line. tea / regular was the parent line before the child added its extra.
At the counter
- Make Order("tea", "regular"). label is tea / regular.
- Make TeaOrder("tea", "regular", "mint"). drink is tea and extra is mint.
- Put super before this.extra. The child can then use this.
- Override label and call super.label(). The full line is tea / regular / mint.
- Read the page. The line is tea / regular / mint.
Misses
Inheritance shares behavior; it does not make every property private or make a child necessary.
- Using this before super in a child constructor
- Repeating the whole parent label instead of calling super.label()
- Forgetting that a child instance is also an instanceof the parent
- Calling the parent class like a normal function instead of using extends and super
- Reading the line as theme / dark
Keep this
extendsconnects TeaOrder to Order- A child constructor calls
super(...)before it usesthis - An override can call
super.label()and add only its own detail - A TeaOrder is an instance of TeaOrder and Order
- The page line is tea / regular / mint
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top