Merge pull request #1629 from Rnbsov/class-inheritance

Обновление статьи "Наследование классов" в соответствии с английской версией учебника.

Author: Alexandre887

1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js

@@ -1,7 +1,7 @@
 class ExtendedClock extends Clock {
   constructor(options) {
     super(options);
-    let { precision=1000 } = options;
+    let { precision = 1000 } = options;
     this.precision = precision;
   }
 

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

@@ -1,8 +1,13 @@
+
 # Наследование классов
 
-Допустим, у нас есть два класса.
+Наследование классов - это способ расширения одного класса другим классом.
+
+Таким образом, мы можем добавить новый функционал к уже существующему.
+
+## Ключевое слово "extends"
 
-`Animal`:
+Допустим, у нас есть класс `Animal`:
 
 ```js
 class Animal {
@@ -16,57 +21,26 @@ class Animal {
   }
   stop() {
     this.speed = 0;
-    alert(`${this.name} стоит.`);
+    alert(`${this.name} стоит неподвижно.`);
   }
 }
 
 let animal = new Animal("Мой питомец");
 ```
 
-![](rabbit-animal-independent-animal.svg)
-
-...И `Rabbit`:
-
-```js
-class Rabbit {
-  constructor(name) {
-    this.name = name;
-  }
-  hide() {
-    alert(`${this.name} прячется!`);
-  }
-}
-
-let rabbit = new Rabbit("Мой кролик");
-```
+Вот как мы можем представить объект `animal` и класс `Animal` графически:
 
-![](rabbit-animal-independent-rabbit.svg)
+![](rabbit-animal-independent-animal.svg)
 
-Сейчас они полностью независимы.
+...И мы хотели бы создать ещё один `class Rabbit`.
 
-Но мы хотим, чтобы `Rabbit` расширял `Animal`. Другими словами, кролики должны происходить от животных, т.е. иметь доступ к методам `Animal` и расширять функциональность `Animal` своими методами.
+Поскольку кролики - это животные, класс `Rabbit` должен быть основан на `Animal`, и иметь доступ к методам животных, так чтобы кролики могли делать то, что могут делать "общие" животные.
 
-Для того, чтобы наследовать класс от другого, мы должны использовать ключевое слово `"extends"` и указать название родительского класса перед `{..}`.
+Синтаксис для расширения другого класса следующий: `class Child extends Parent`.
 
-Ниже `Rabbit` наследует от `Animal`:
+Давайте создадим `class Rabbit`, который наследуется от `Animal`:
 
-```js run
-class Animal {
-  constructor(name) {
-    this.speed = 0;
-    this.name = name;
-  }
-  run(speed) {
-    this.speed = speed;
-    alert(`${this.name} бежит со скоростью ${this.speed}.`);
-  }
-  stop() {
-    this.speed = 0;
-    alert(`${this.name} стоит.`);
-  }
-}
-
-// Наследуем от Animal указывая "extends Animal"
+```js
 *!*
 class Rabbit extends Animal {
 */!*
@@ -80,24 +54,30 @@ let rabbit = new Rabbit("Белый кролик");
 rabbit.run(5); // Белый кролик бежит со скоростью 5.
 rabbit.hide(); // Белый кролик прячется!
 ```
-Теперь код `Rabbit` стал короче, так как используется конструктор класса `Animal` по умолчанию и кролик может использовать метод `run` как и все животные.
 
-Ключевое слово `extends` работает, используя прототипы. Оно устанавливает  `Rabbit.prototype.[[Prototype]]` в `Animal.prototype`. Так что если метод не найден в  `Rabbit.prototype`, JavaScript берёт его из `Animal.prototype`.
+Объект класса `Rabbit` имеет доступ как к методам `Rabbit`, таким как `rabbit.hide()`, так и к методам `Animal`, таким как `rabbit.run()`.
+
+Внутри ключевое слово `extends` работает по старой доброй механике прототипов. Оно устанавливает `Rabbit.prototype.[[Prototype]]` в `Animal.prototype`. Таким образом, если метода не оказалось в `Rabbit.prototype`, JavaScript берет его из `Animal.prototype`.
 
 ![](animal-rabbit-extends.svg)
 
-Как мы помним из главы <info:native-prototypes>, в JavaScript используется наследование на прототипах для встроенных объектов. Например `Date.prototype.[[Prototype]]` это `Object.prototype`, поэтому у дат есть универсальные методы объекта.
+Например, чтобы найти метод `rabbit.run`, движок проверяет (снизу вверх на картинке):
+1. Объект `rabbit` (не имеет `run`).
+2. Его прототип, то есть `Rabbit.prototype` (имеет `hide`, но не имеет `run`).
+3. Его прототип, то есть (вследствие `extends`) `Animal.prototype`, в котором, наконец, есть метод `run`.
+
+Как мы помним из главы <info:native-prototypes>, сам JavaScript использует наследование на прототипах для встроенных объектов. Например, `Date.prototype.[[Prototype]]` является `Object.prototype`, поэтому у дат есть универсальные методы объекта.
 
 ````smart header="После `extends` разрешены любые выражения"
-Синтаксис создания класса допускает указывать после `extends` не только класс, но любое выражение.
+Синтаксис создания класса допускает указывать после `extends` не только класс, но и любое выражение.
 
 Пример вызова функции, которая генерирует родительский класс:
 
 ```js run
 function f(phrase) {
   return class {
-    sayHi() { alert(phrase) }
-  }
+    sayHi() { alert(phrase); }
+  };
 }
 
 *!*
@@ -113,23 +93,25 @@ new User().sayHi(); // Привет
 
 ## Переопределение методов
 
-Давайте пойдём дальше и переопределим метод. Сейчас `Rabbit` наследует от `Animal` метод `stop`, который устанавливает `this.speed = 0`.
+Теперь давайте продвинемся дальше и переопределим метод. По умолчанию все методы, не указанные в классе `Rabbit`, берутся непосредственно "как есть" из класса `Animal`.
 
-Если мы определим свой метод `stop` в классе `Rabbit`, то он будет использоваться взамен родительского:
+Но если мы укажем в `Rabbit` собственный метод, например `stop()`, то он будет использован вместо него:
 
 ```js
 class Rabbit extends Animal {
   stop() {
-    // ...будет использован для rabbit.stop()
+    // ...теперь это будет использоваться для rabbit.stop()
+    // вместо stop() из класса Animal
   }
 }
 ```
 
-...Впрочем, обычно мы не хотим полностью заменить родительский метод, а скорее хотим сделать новый на его основе, изменяя или расширяя его функциональность. Мы делаем что-то в нашем методе и вызываем родительский метод до/после или в процессе.
+Впрочем, обычно мы не хотим полностью заменить родительский метод, а скорее хотим сделать новый на его основе, изменяя или расширяя его функциональность. Мы делаем что-то в нашем методе и вызываем родительский метод до/после или в процессе.
 
 У классов есть ключевое слово `"super"` для таких случаев.
+
 - `super.method(...)` вызывает родительский метод.
-- `super(...)` вызывает родительский конструктор (работает только внутри нашего конструктора).
+- `super(...)` для вызова родительского конструктора (работает только внутри нашего конструктора).
 
 Пусть наш кролик автоматически прячется при остановке:
 
@@ -148,7 +130,7 @@ class Animal {
 
   stop() {
     this.speed = 0;
-    alert(`${this.name} стоит.`);
+    alert(`${this.name} стоит неподвижно.`);
   }
 
 }
@@ -178,6 +160,7 @@ rabbit.stop(); // Белый кролик стоит. Белый кролик п
 Как упоминалось в главе <info:arrow-functions>, стрелочные функции не имеют `super`.
 
 При обращении к `super` стрелочной функции он берётся из внешней функции:
+
 ```js
 class Rabbit extends Animal {
   stop() {
@@ -247,11 +230,13 @@ let rabbit = new Rabbit("Белый кролик", 10); // Error: this is not de
 
 Упс! При создании кролика - ошибка! Что не так?
 
-Если коротко, то в классах-потомках конструктор обязан вызывать `super(...)`, и (!) делать это перед использованием `this`.
+Если коротко, то:
+
+- **Конструкторы в наследуемых классах должны обязательно вызывать `super(...)`, и (!) делать это перед использованием `this`.**.
 
 ...Но почему? Что происходит? Это требование кажется довольно странным.
 
-Конечно, всему есть объяснение. Давайте углубимся в детали, чтобы вы действительно поняли, что происходит.
+Конечно, всему есть своё объяснение. Давайте углубимся в детали, чтобы вы действительно поняли, что происходит.
 
 В JavaScript существует различие между "функцией-конструктором наследующего класса" и всеми остальными. В наследующем классе соответствующая функция-конструктор помечена специальным внутренним свойством `[[ConstructorKind]]:"derived"`.
 
@@ -295,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="Продвинутая информация"
@@ -316,6 +395,7 @@ alert(rabbit.earLength); // 10
 Вы можете пропустить эту часть и перейти ниже к подсекции `[[HomeObject]]`, если не хотите знать детали. Вреда не будет. Или читайте далее, если хотите разобраться.
 
 В примере ниже `rabbit.__proto__ = animal`. Попробуем в `rabbit.eat()` вызвать `animal.eat()`, используя `this.__proto__`:
+
 ```js run
 let animal = {
   name: "Animal",
@@ -417,7 +497,6 @@ longEar.eat(); // Error: Maximum call stack size exceeded
 
 Давайте посмотрим, как это работает - опять же, используя простые объекты:
 
-
 ```js run
 let animal = {
   name: "Животное",