👾 smth

Author: Rnbsov

1-js/09-classes/02-class-inheritance/article.md

@@ -280,6 +280,100 @@ alert(rabbit.earLength); // 10
 */!*
 ```
 
+### Переопределение полей класса: каверзное замечание
+
+```warn header="Продвинутое замечание"
+В этом примечании предполагается, что у вас есть определенный опыт работы с классами, возможно, при работе с другими языками программирования.
+
+Это дает лучшее представление о языке, а также объясняет поведение, которое может быть источником ошибок (но не очень часто).
+
+Если вы нашли этот материал слишком сложным, просто продолжайте, продолжайте читать, а затем вернитесь к нему через некоторое время.
+```
+
+Мы можем переопределять не только методы, но и поля класса.
+
+Хотя, когда мы обращаемся к переопределенному полю в родительском конструкторе, возникает каверзное поведение, сильно отличающееся от большинства других языков программирования.
+
+Рассмотрим этот пример:
+
+```js run
+class Animal {
+  name = 'animal';
+
+  constructor() {
+    alert(this.name); // (*)
+  }
+}
+
+class Rabbit extends Animal {
+  name = 'rabbit';
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // animal
+*/!*
+```
+
+Здесь класс `Rabbit` расширяет `Animal` и переопределяет поле `name` своим собственным значением.
+
+В `Rabbit` нет собственного конструктора, поэтому вызывается конструктор `Animal`.
+
+Что интересно, так это то, что в обоих случаях: `new Animal()` и `new Rabbit()`, `alert` в строке `(*)` показывает `animal`.
+
+**Другими словами, родительский конструктор всегда использует свое собственное значение поля, а не переопределенное.**
+
+Что в этом странного?
+
+Если это еще не ясно, пожалуйста, сравните с методами.
+
+Вот тот же код, но вместо поля `this.name`, мы вызываем метод `this.showName()`:
+
+```js run
+class Animal {
+  showName() {  // вместо this.name = 'animal'
+    alert('animal');
+  }
+
+  constructor() {
+    this.showName(); // вместо alert(this.name);
+  }
+}
+
+class Rabbit extends Animal {
+  showName() {
+    alert('rabbit');
+  }
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // rabbit
+*/!*
+```
+
+Обратите внимание: теперь результат другой.
+
+И это то, чего мы, естественно, ожидаем. Когда родительский конструктор вызывается в производном классе, он использует переопределенный метод.
+
+...Но для полей класса это не так. Как уже было сказано, родительский конструктор всегда использует родительское поле.
+
+Почему есть разница?
+
+Ну, причина в порядке инициализации поля. Поле класса инициализируется:
+- Перед конструктором для базового класса (который ничего не расширяет),
+- Сразу после `super()` для производного класса.
+
+В нашем случае `Rabbit` - это производный класс. В нем нет конструктора `constructor()`. Как было сказано ранее, это то же самое, как если бы существовал пустой конструктор только с `super(...args)`.
+
+Итак, `new Rabbit()` вызывает `super()`, таким образом, выполняя родительский конструктор, и (согласно правилу для производных классов) только после этого инициализируются поля его класса. На момент выполнения родительского конструктора еще нет полей класса `Rabbit`, поэтому используются поля `Animal`.
+
+Это тонкое различие между полями и методами специфично для JavaScript
+
+К счастью, такое поведение проявляется только в том случае, если в родительском конструкторе используется переопределенное поле. Тогда может быть трудно понять, что происходит, поэтому мы объясняем это здесь.
+
+Если это становится проблемой, ее можно исправить, используя методы или геттеры/сеттеры вместо полей.
+
 ## Устройство super, [[HomeObject]]
 
 ```warn header="Продвинутая информация"