Is JS inheritance overridden in the constructor?
can someone explain the following to me?
class BaseClass {
prop = 88;
constructor(){
console.log("baseClass prop is ", this.prop);
}
}
class DerivedClass extends BaseClass{
prop = 83;
constructor(){
super();
console.log("derivedClass prop is ", this.prop);
}
}
new derivedClass();
and the output is
baseClass prop is 88
derivedClass prop is 83
now shouldn't both props be the same (83)? because one pivot has redefined the other? Am I doing something wrong here?
source to share
You forget about the call super()
in the derived class constructor.
What it does is call the base class constructor. So the constructor of the base class runs before completion before the constructor of the derived class.
The value when the console.log
base class statement is executed , the variable prop
is still 88.
source to share
Class properties are initialized when building from the bottom of the class hierarchy upwards when constructors are executed.
- In base classes, they are initialized inside the constructor automatically at the beginning.
- In subclasses, they run immediately after
super()
.
Logic is essential
this.prop = 88;
console.log("baseClass prop is ", this.prop);
this.prop = 83;
console.log("derivedClass prop is ", this.prop);
because class
class BaseClass {
constructor(){
this.prop = 88;
console.log("baseClass prop is ", this.prop);
}
}
class DerivedClass extends BaseClass {
constructor(){
super();
this.prop = 83;
console.log("derivedClass prop is ", this.prop);
}
}
source to share
Your code is invalid. ES6 is not TypeScript, so your class attributes must be declared inside your constructors. Also, you must follow a coding convention that supports the pascal case on top of the camel case for class names. Here's the correct syntax:
class BaseClass {
constructor(){
this.prop = 88;
console.log("BaseClass prop is", this.prop);
}
}
class DerivedClass extends BaseClass {
constructor(){
super();
this.prop = 83;
console.log("DerivedClass prop is", this.prop);
}
}
new DerivedClass();
So why do we have 88 and 83? In fact, when your derived class is a base class through super()
, this.prop
is 88, and you register it immediately. When the execution super()
finishes, this.prop
it becomes 83, but there is no reason your previous log will go away ...
Now, if you want private attributes for any reason, you can declare them outside of your constructors, but you need IIFEs (Instant Callable Expressions):
const BaseClass = (() => {
let prop = 88;
class BaseClass {
constructor(){
console.log("BaseClass prop is", prop);
}
}
return BaseClass;
})();
const DerivedClass = (() => {
let prop = 83;
class DerivedClass extends BaseClass {
constructor(){
super();
console.log("DerivedClass prop is", prop);
}
}
return DerivedClass;
})();
new DerivedClass();
As you can see, each class uses a variable prop
defined in its scope.
source to share