I just faced the weird behaviour that i don't understant. You can run this code yourself and see.
class Base {
get = () => {
console.log('i am the Base function');
}
}
class Child extends Base {
get () {
console.log('i am the Child function');
}
}
const child = new Child();
child.get(); // outputs 'i am the Base function'
Is it supposed to be like this? Can you explain me why? And the most important question - how to overcome this? All i want is to override 'get' property and still be able to access 'get' from parent class. I cannot edit Base class.
I actually found the solution. I can do something like this:
class Base {
get = () => {
console.log('i am the Base function');
}
}
class Child extends Base {
constructor() {
super();
this.parentGet = this.get;
this.get = () => {
console.log('i am the Child function');
this.parentGet();
}
}
}
const child = new Child();
child.get(); // outputs 'i am the Child function' and then 'i am the Base function'
But it doesn't seem right to me.
Juan Pablo Isaza
You're using instance method syntax in the parent class. That means that the property initialization for that will happen in the parent class constructor, so that will hide the method on the prototype.
If you use normal function (method) syntax in the parent, it'll work as you expect.
class Base {
get () {
console.log('i am the Base function');
}
}
Alternatively, you could do the same thing as your solution by making the child property also be an instance property. However, using an arrow function as a class method, which is sort-of possible as you've discovered, is probably something you shouldn't do unless you really understand what you're getting from that option.
To explain further: in your original Base code, the declaration creates an instance method. That means that it works as if your class looked like:
class Base {
constructor() {
this.get = () => console.log("i am the Base function");
}
}
In other words, the "get" property is directly on the constructed instance, and not on Base.prototype. Thus that instance property means that JavaScript won't bother to look on the prototype chain at all when someObject.get() is called.
Thus the direct answer to your question is "no"; JavaScript does allow subclass methods to override parent class methods via the normal functioning of the prototype chain. However, the answer is "yes" when the parent class creates an instance property that hides something in the prototype chain.