Accessing Parent Methods in Javascript Classes
December 05, 2020
I recently got to do Object-Oriented programming in Javascript. Many of the Javascript features resemble Java language (class
, super
, extends
and static
keywords to name a few).
One of the differences with Java is that super()
will not be called implicitly in child class so you must call it explicitly always when extending a class.
Another interesting issue I ran into is that if super.someMethod()
is called from a child class, then someMethod
must not be implemented as an arrow function. For example, the code below will trigger an error:
class Car {
drive = () => "drive"
}
class FastCar extends Car {
drive = () => super.drive() + " fast"
}
const fastCar = new FastCar()
console.log(fastCar.drive())
The error is TypeError: Cannot read property 'call' of undefined
will occur on the invocation of the line console.log(fastCar.drive())
. The error occurs because the drive
method in Car
is implemented as an arrow function. As per this stackoverflow answer a class method implemented as an arrow function become a property with function type while a method implemented as a regular function stays a class method. So while methods are stored in class prototype, properties are only accessible on class instances. Therefore the correct implementation is as follows:
class Car {
drive() {
return "drive"
}
}
class FastCar extends Car {
drive = () => super.drive() + " fast"
}
const fastCar = new FastCar()
console.log(fastCar.drive())