JavaScript Classes
A child class can replace a method it inherited with its own version.
Define a method with the same name and the child's version wins.
This is what lets different classes respond to the same call in their own way.
Example
javascript
class Animal {
speak() {
return "some sound";
}
}
class Dog extends Animal {
speak() {
return "woof";
}
}
console.log(new Dog().speak());The output is woof; the parent's version was replaced.
The child's method is found first, so it is the one that runs.
The parent's version is still reachable through super.
Different classes offering the same method is called polymorphism.
Syntax
javascript
class Child extends Parent {
method() {
// replaces the parent's method
}
}Same name, same idea, different behaviour.
One loop can call the same method on very different objects.
Each one answers in its own way.
Example
javascript
class Animal {
speak() {
return "some sound";
}
}
class Dog extends Animal {
speak() {
return "woof";
}
}
class Cat extends Animal {
speak() {
return "meow";
}
}
const sounds = [new Dog(), new Cat(), new Animal()].map(function (a) {
return a.speak();
});
console.log(sounds.join(" "));The output is woof meow some sound.
super lets you add to the inherited version.
Example
javascript
class Animal {
describe() {
return "an animal";
}
}
class Dog extends Animal {
describe() {
return super.describe() + ", specifically a dog";
}
}
console.log(new Dog().describe());Nothing was duplicated.
JavaScript looks at the actual object, not the variable's name.
That is why the same code gives different results.
Example
javascript
class Animal {
speak() {
return "generic";
}
}
class Dog extends Animal {
speak() {
return "woof";
}
}
function makeItSpeak(animal) {
return animal.speak();
}
console.log(makeItSpeak(new Dog()));
console.log(makeItSpeak(new Animal()));One function, two different answers.
The same idea applies, but super() is compulsory.
Example
javascript
class Shape {
constructor(sides) {
this.sides = sides;
}
}
class Square extends Shape {
constructor() {
super(4);
this.name = "square";
}
}
const square = new Square();
console.log(square.name + " has " + square.sides + " sides");The child fixed the value the parent needed.
An override should accept the same arguments and return the same kind of value.
Changing that makes the classes no longer interchangeable.
Example
javascript
class Formatter {
format(text) {
return text;
}
}
class LoudFormatter extends Formatter {
format(text) {
return text.toUpperCase();
}
}
console.log(new LoudFormatter().format("hello"));Both take a string and return a string, so either can be used.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Method Overriding</title>
</head>
<body>
<h1>Method Overriding</h1>
<p id="out"></p>
<script>
class Shape {
area() {
return 0;
}
describe() {
return this.constructor.name + " has area " + this.area();
}
}
class Square extends Shape {
constructor(side) {
super();
this.side = side;
}
area() {
return this.side * this.side;
}
}
class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}
area() {
return Math.round(Math.PI * this.radius * this.radius);
}
}
const shapes = [new Square(4), new Circle(3)];
document.getElementById("out").innerHTML = shapes.map(function (s) {
return s.describe();
}).join("<br>");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try another shape:
Add a Rectangle class with its own area and put it in the list.
super.method() still reaches the original.Overriding is what makes inheritance useful rather than just tidy.
Polymorphism lets one piece of code work with many types.
Keeping the shape consistent is what keeps that possible.