ревью

Author: xcurveballx

1-js/09-classes/07-mixins/article.md

@@ -1,20 +1,20 @@
 # Примеси
 
-В JavaScript мы можем использовать наследование только от одного объекта. Объект имеет единственный `[[Prototype]]`. И класс может расширить только один другой класс.
+В JavaScript можно наследовать только от одного объекта. Объект имеет единственный `[[Prototype]]`. И класс может расширить только один другой класс.
 
 Иногда это может ограничивать нас. Например, у нас есть класс `StreetSweeper` и класс `Bicycle`, а мы хотим создать `StreetSweepingBicycle`.
 
 Или, говоря о программировании, у нас есть класс `Renderer`, который реализует шаблон, и класс `EventEmitter`, реализующий событие. Мы хотели бы объединить их функционал в классе `Page`, чтобы создать страницу, которая будет использовать шаблон и запускать событие.
 
 Для таких случаев существуют "примеси".
 
-Как говорится в Википедии, [примесь](https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%81%D1%8C_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)) является классом, который имеет методы, и мы можем использовать эти методы в других классах, не будучи родителем тех классов.
+По определению из Википедии, [примесь](https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%81%D1%8C_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)) - это класс, методы которого предназначены для использования в других классах, причём без наследования от примеси.
 
 Другими словами, *примесь* определяет методы, которые реализуют определённое поведение. Мы не используем примесь саму по себе, она нужна, чтобы добавить другим классам больше функционала.
 
 ## Пример примеси
 
-Простой путь создания примеси в JavaScript - это создание объекта с полезными методами, так чтобы мы легко могли добавить их в прототип любого класса.
+Простейший способ сделать примесь в JavaScript - это создать объект с полезными методами, которые затем могут быть легко добавлены в прототип любого класса.
 
 В примере ниже примесь `sayHiMixin` имеет методы для придания объектам класса `User` возможности вести разговор:
 
@@ -47,7 +47,9 @@ Object.assign(User.prototype, sayHiMixin);
 new User("Dude").sayHi(); // Hello Dude!
 ```
 
-Это не наследование, а просто скопированные методы. Таким образом, класс `User` может расширять другие классы и также содержать в себе методы от примеси, например:
+Это не наследование, а просто копирование методов. Таким образом, класс `User` может расширять другие классы, но при этом также включать в себя примеси, "подмешивающие" другие методы.
+
+Например:
 
 ```js
 class User extends Person {
@@ -57,7 +59,7 @@ class User extends Person {
 Object.assign(User.prototype, sayHiMixin);
 ```
 
-Примеси могут использовать наследование между собой.
+Примеси могут наследовать друг другу.
 
 В примере ниже `sayHiMixin` наследуется от `sayMixin`:
 
@@ -69,7 +71,7 @@ let sayMixin = {
 };
 
 let sayHiMixin = {
-  __proto__: sayMixin, // (или мы можем использовать Object.create для определения прототипа)
+  __proto__: sayMixin, // (или мы можем использовать Object.create для задания прототипа)
 
   sayHi() {
     *!*
@@ -95,32 +97,34 @@ Object.assign(User.prototype, sayHiMixin);
 new User("Dude").sayHi(); // Hello Dude!
 ```
 
-Обратите внимание, что мы вызвали родительский метод `super.say()` из `sayHiMixin` в прототипе другой примеси, а не в классе.
+Обратим внимание, что при вызове родительского метода `super.say()` из `sayHiMixin` этот метод ищется в прототипе самой примеси, а не класса.
 
 ![](mixin-inheritance.png)
 
-Это связано с тем, что методы из `sayHiMixin` имеют установленное свойство `[[HomeObject]]`. А `super` на самом деле означает `sayHiMixin.__ proto__`, а не `User.__ proto__`.
+Это связано с тем, что методы `sayHi` и `sayBye` были изначально созданы в объекте `sayHiMixin`. Так что их внутреннее свойство `[[HomeObject]]` ссылается на `sayHiMixin`, как показано на картинке выше.
 
-## EventMixin
+Вызов `super` ищет родительские методы в `[[HomeObject]].__proto__`, что означает `sayHiMixin.__proto__`, а не `User.__proto__`.
 
-Сейчас давайте создадим примесь для реального случая.
+## EventMixin
 
-Важная особенность при работе с объектами - это работа с событиями.
+А сейчас давайте создадим примесь, полезную в реальной жизни.
 
-То есть, объект должен иметь метод для "генерации события", когда с ним происходит что-то важное, а другие объекты должны иметь возможность "слушать" такие события.
+Многие объекты в браузерной разработке (и не только) обладают важной способностью - они могут работать с событиями. События - это способ передачи информации всем, кто в ней заинтересован. Давайте создадим примесь, которая позволит легко добавлять функционал по работе с событиями любым классам/объектам.
 
-Событие должно иметь имя и, опционально, какие-то дополнительные данные, ассоциированные с ним.
+- Примесь добавит метод `.trigger(name, [data])` для генерации события. Аргумент `name` - это имя события, за которым следует опциональный аргумент `data`.
+- Также будет добавлен метод `.on(name, handler)`, который назначает обработчик для события с заданным именем. Обработчик будет вызван, когда событие произойдёт.
+- ...и метод `.off(name, handler)`, который удаляет обработчик указанного события.
 
-Например, объект `user` может генерировать событие `"login"`, когда посетитель входит. А другой объект `calendar` может захотеть получать событие `"login"`, чтобы загрузить календарь для вошедшего пользователя.
+После того, как все методы примеси будут добавлены, объект `user` сможет сгенерировать событие `"login"` после входа пользователя в личный кабинет. Объект `calendar` тоже может рассчитывать на событие `"login"`, чтобы показывать зашедшему пользователю актуальный для него календарь.
 
 Или `menu` может генерировать событие `"select"`, когда элемент меню выбран, а другие объекты могут захотеть получить эту информацию и тоже отреагировать на это событие.
 
-События — это способ "поделиться информацией" со всеми, кто этого захочет. Они могут быть полезны в любом классе, поэтому давайте сделаем для них пример:
+Рассмотрим это всё на примере:
 
 ```js run
 let eventMixin = {
   /**
-   * Подпишемся на событие, используя:
+   * Подписаться на событие, использование:
    * menu.on('select', function(item) { ... }
    */
   on(eventName, handler) {
@@ -132,7 +136,7 @@ let eventMixin = {
   },
 
   /**
-   * Отменим подписку, используя:
+   * Отменить подписку, использование:
    * menu.off('select', handler)
    */
   off(eventName, handler) {
@@ -146,7 +150,7 @@ let eventMixin = {
   },
 
   /**
-   * Запустим событие и добавим к нему данные
+   * Сгенерировать событие с указанным именем и данными
    * this.trigger('select', data1, data2);
    */
   trigger(eventName, ...args) {
@@ -160,13 +164,13 @@ let eventMixin = {
 };
 ```
 
-Итак, у нас 3 метода:
+Итак, у нас есть 3 метода:
 
-1. `.on(eventName, handler)` -- назначили функцию `handler`, чтобы обработать событие с заданным именем. Храним обработчики в свойстве  `_eventHandlers`.
+1. `.on(eventName, handler)` -- назначает функцию `handler`, чтобы обработать событие с заданным именем. Обработчики хранятся в свойстве  `_eventHandlers`, представляющим собой объект, в котором имя события является ключом, а массив обработчиков - значением.
 
-2. `.off(eventName, handler)` -- убираем функцию из списка обработчиков.
+2. `.off(eventName, handler)` -- убирает функцию из списка обработчиков.
 
-3. `.trigger(eventName, ...args)` -- генерируем событие: все назначенные обработчики вызываются, и `args` передаётся в обработчики в качестве аргумента.
+3. `.trigger(eventName, ...args)` -- генерирует событие: все назначенные обработчики из `_eventHandlers[eventName]` вызываются, и `args` передаётся им в качестве аргумента.
 
 Использование:
 
@@ -191,9 +195,9 @@ menu.on("select", value => alert(`Выбранное значение: ${value}`
 menu.choose("123"); // выбранное значение
 ```
 
-Если у нас есть код, заинтересованный в событии "select", то мы можем привязать его с помощью `menu.on(...)`.
+Если у нас есть код, заинтересованный в событии "select", то он может подписаться на него с помощью `menu.on(...)`.
 
-И `eventMixin` может добавить такое поведение в любой класс без вмешательства в цепочку наследования.
+И `eventMixin` позволяет легко добавить такое поведение в любой класс без вмешательства в цепочку наследования.
 
 ## Итого
 

1-js/09-classes/07-mixins/head.html

@@ -2,8 +2,8 @@
 let eventMixin = {
 
   /**
-   * Подпишемся на событие, используя:
-   *  menu.on('select', function(item) { ... }
+   * Подписаться на событие, использование:
+   * menu.on('select', function(item) { ... }
   */
   on(eventName, handler) {
     if (!this._eventHandlers) this._eventHandlers = {};
@@ -14,8 +14,8 @@
   },
 
   /**
-   * Отменим подписку, используя:
-   *  menu.off('select', handler)
+   * Отменить подписку, использование:
+   * menu.off('select', handler)
    */
   off(eventName, handler) {
     let handlers = this._eventHandlers && this._eventHandlers[eventName];
@@ -28,8 +28,8 @@
   },
 
   /**
-   * Запустим событие и добавим к нему данные
-   *  this.trigger('select', data1, data2);
+   * Сгенерировать событие с указанным именем и данными
+   * this.trigger('select', data1, data2);
    */
   trigger(eventName, ...args) {
     if (!this._eventHandlers || !this._eventHandlers[eventName]) {