fixes #1979
This commit is contained in:
parent
340ce43421
commit
da9849d61a
2 changed files with 102 additions and 26 deletions
|
@ -279,6 +279,102 @@ alert(rabbit.earLength); // 10
|
|||
```
|
||||
|
||||
|
||||
|
||||
### Overriding class fields: a tricky note
|
||||
|
||||
```warn header="Advanced note"
|
||||
This note assumes you have a certain experience with classes, maybe in other programming languages.
|
||||
|
||||
It provides better insight into the language and also explains the behavior that might be a source of bugs (but not very often).
|
||||
|
||||
If you find it difficult to understand, just go on, continue reading, then return to it some time later.
|
||||
```
|
||||
|
||||
We can override not only methods, but also class fields.
|
||||
|
||||
Although, there's a tricky behavior when we access an overridden field in parent constructor, quite different from most other programming languages.
|
||||
|
||||
Consider this example:
|
||||
|
||||
```js run
|
||||
class Animal {
|
||||
name = 'animal'
|
||||
|
||||
constructor() {
|
||||
alert(this.name); // (*)
|
||||
}
|
||||
}
|
||||
|
||||
class Rabbit extends Animal {
|
||||
name = 'rabbit';
|
||||
}
|
||||
|
||||
new Animal(); // animal
|
||||
*!*
|
||||
new Rabbit(); // animal
|
||||
*/!*
|
||||
```
|
||||
|
||||
Here, class `Rabbit` extends `Animal` and overrides `name` field with its own value.
|
||||
|
||||
There's no own constructor in `Rabbit`, so `Animal` constructor is called.
|
||||
|
||||
What's interesting is that in both cases: `new Animal()` and `new Rabbit()`, the `alert` in the line `(*)` shows `animal`.
|
||||
|
||||
**In other words, parent constructor always uses its own field value, not the overridden one.**
|
||||
|
||||
What's odd about it?
|
||||
|
||||
If it's not clear yet, please compare with methods.
|
||||
|
||||
Here's the same code, but instead of `this.name` field we call `this.showName()` method:
|
||||
|
||||
```js run
|
||||
class Animal {
|
||||
showName() { // instead of this.name = 'animal'
|
||||
alert('animal');
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.showName(); // instead of alert(this.name);
|
||||
}
|
||||
}
|
||||
|
||||
class Rabbit extends Animal {
|
||||
showName() {
|
||||
alert('rabbit');
|
||||
}
|
||||
}
|
||||
|
||||
new Animal(); // animal
|
||||
*!*
|
||||
new Rabbit(); // rabbit
|
||||
*/!*
|
||||
```
|
||||
|
||||
Please note: now the output is different.
|
||||
|
||||
And that's what we naturally expect. When the parent constructor is called in the derived class, it uses the overridden method.
|
||||
|
||||
...But for class fields it's not so. As said, the parent constructor always uses the parent field.
|
||||
|
||||
Why is there the difference?
|
||||
|
||||
Well, the reason is in the field initialization order. The class field is initialized:
|
||||
- Before constructor for the base class (that doesn't extend anything),
|
||||
- Imediately after `super()` for the derived class.
|
||||
|
||||
In our case, `Rabbit` is the derived class. There's no `constructor()` in it. As said previously, that's the same as if there was an empty constructor with only `super(...args)`.
|
||||
|
||||
So, `new Rabbit()` calls `super()`, thus executing the parent constructor, and (per the rule for derived classes) only after that its class fields are initialized. At the time of the parent constructor execution, there are no `Rabbit` class fields yet, that's why `Animal` fields are used.
|
||||
|
||||
This subtle difference between fields and methods is specific to JavaScript
|
||||
|
||||
Luckily, this behavior only reveals itself if an overridden field is used in the parent constructor. Then it may be difficult to understand what's going on, so we're explaining it here.
|
||||
|
||||
If it becomes a problem, one can fix it by using methods or getters/setters instead of fields.
|
||||
|
||||
|
||||
## Super: internals, [[HomeObject]]
|
||||
|
||||
```warn header="Advanced information"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue