renovations
This commit is contained in:
Ilya Kantor
parent
e1948130f6
commit
b76c541212
5 changed files with 106 additions and 65 deletions
|
|
@ -17,17 +17,17 @@
|
|||
|
||||
Именно поэтому, увидев новую технику, мы уже можем что-то с ней сделать, даже не читая инструкцию.
|
||||
|
||||
**Механизм наследования позволяет определить базовый класс `Машина`, в нём описать то, что свойственно всем машинам, а затем на его основе построить другие, более конкретные: `Кофеварка`, `Холодильник` и т.п.**
|
||||
Механизм наследования позволяет определить базовый класс `Машина`, в нём описать то, что свойственно всем машинам, а затем на его основе построить другие, более конкретные: `Кофеварка`, `Холодильник` и т.п.
|
||||
|
||||
[smart header="В веб-разработке всё так же"]
|
||||
В веб-разработке нам могут понадобиться классы `Меню`, `Табы`, `Диалог` и другие компоненты интерфейса.
|
||||
В веб-разработке нам могут понадобиться классы `Меню`, `Табы`, `Диалог` и другие компоненты интерфейса. В них всех обычно есть что-то общее.
|
||||
|
||||
Можно выделить полезный общий функционал в класс `Компонент` и наследовать их от него, чтобы не дублировать код. Это обычная практика, принятая во множестве библиотек.
|
||||
Можно выделить такой общий функционал в класс `Компонент` и наследовать их от него, чтобы не дублировать код.
|
||||
[/smart]
|
||||
|
||||
## Наследование от Machine
|
||||
|
||||
Например, у нас есть класс `Machine`, который реализует методы "включить" `enable()` и "выключить" `disable()`:
|
||||
Базовый класс "машина" `Machine` будет реализовывать общего вида методы "включить" `enable()` и "выключить" `disable()`:
|
||||
|
||||
```js
|
||||
function Machine() {
|
||||
|
|
@ -48,33 +48,33 @@ function Machine() {
|
|||
```js
|
||||
function CoffeeMachine(power) {
|
||||
*!*
|
||||
Machine.call(this);
|
||||
Machine.call(this); // отнаследовать
|
||||
*/!*
|
||||
|
||||
var waterAmount = 0;
|
||||
|
||||
this.setWaterAmount = function(amount) {
|
||||
waterAmount = amount;
|
||||
};
|
||||
|
||||
function onReady() {
|
||||
alert('Кофе готово!');
|
||||
}
|
||||
|
||||
this.run = function() {
|
||||
setTimeout(onReady, 1000);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
|
||||
*!*
|
||||
coffeeMachine.enable();
|
||||
coffeeMachine.setWaterAmount(100);
|
||||
coffeeMachine.disable();
|
||||
*/!*
|
||||
```
|
||||
|
||||
Наследование реализовано вызовом `Machine.call(this)` в начале `CoffeeMachine`.
|
||||
Наследование реализовано вызовом `Machine.call(this)` в начале конструктора `CoffeeMachine`.
|
||||
|
||||
Он вызывает функцию `Machine`, передавая ей в качестве контекста `this` текущий объект. `Machine`, в процессе выполнения, записывает в `this` различные полезные свойства и методы, в нашем случае `this.enable` и `this.disable`.
|
||||
|
||||
Далее `CoffeeMachine` продолжает выполнение и может добавить свои свойства и методы, а также пользоваться унаследованными.
|
||||
Далее конструктор `CoffeeMachine` продолжает выполнение и может добавить свои свойства и методы.
|
||||
|
||||
В результате мы получаем объект `coffeeMachine`, который включает в себя методы из `Machine` и `CoffeeMachine`.
|
||||
|
||||
## Защищённые свойства
|
||||
|
||||
|
|
@ -116,13 +116,13 @@ var coffeeMachine = new CoffeeMachine(10000);
|
|||
|
||||
**Чтобы наследник имел доступ к свойству, оно должно быть записано в `this`.**
|
||||
|
||||
**При этом, чтобы обозначить, что свойство является внутренним, его имя начинают с подчёркивания `_`.**
|
||||
При этом, чтобы обозначить, что свойство является внутренним, его имя начинают с подчёркивания `_`.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
function Machine() {
|
||||
*!*
|
||||
this._enabled = false;
|
||||
this._enabled = false; // вместо var enabled
|
||||
*/!*
|
||||
|
||||
this.enable = function() {
|
||||
|
|
@ -147,30 +147,19 @@ function CoffeeMachine(power) {
|
|||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
```
|
||||
|
||||
**Подчёркивание в начале свойства -- общепринятый знак, что свойство является внутренним, предназначенным лишь для доступа из самого объекта и его наследников. Такие свойства называют *защищёнными*.**
|
||||
Подчёркивание в начале свойства -- общепринятый знак, что свойство является внутренним, предназначенным лишь для доступа из самого объекта и его наследников. Такие свойства называют *защищёнными*.
|
||||
|
||||
Технически это, конечно, возможно, но приличный программист снаружи в такое свойство не полезет.
|
||||
|
||||
**Вообще, это стандартная практика: конструктор сохраняет свои параметры в свойствах объекта. Иначе наследники не будут иметь к ним доступ.**
|
||||
Технически, залезть в него из внешнего кода, конечно, возможно, но приличный программист так делать не будет.
|
||||
|
||||
## Перенос свойства в защищённые
|
||||
|
||||
В коде выше есть свойство `power`. Сейчас мы его тоже сделаем защищённым и перенесём в `Machine`, поскольку "мощность" свойственна всем машинам, а не только кофеварке:
|
||||
У `CoffeeMachine` есть приватное свойство `power`. Сейчас мы его тоже сделаем защищённым и перенесём в `Machine`, поскольку "мощность" свойственна всем машинам, а не только кофеварке.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
function CoffeeMachine(power) {
|
||||
*!*
|
||||
Machine.apply(this, arguments); // (1)
|
||||
*/!*
|
||||
|
||||
alert(this._enabled); // false
|
||||
alert(this._power); // 10000
|
||||
}
|
||||
|
||||
function Machine(power) {
|
||||
*!*
|
||||
this._power = power; // (2)
|
||||
this._power = power; // (1)
|
||||
*/!*
|
||||
|
||||
this._enabled = false;
|
||||
|
|
@ -184,20 +173,29 @@ function Machine(power) {
|
|||
};
|
||||
}
|
||||
|
||||
function CoffeeMachine(power) {
|
||||
*!*
|
||||
Machine.apply(this, arguments); // (2)
|
||||
*/!*
|
||||
|
||||
alert(this._enabled); // false
|
||||
alert(this._power); // 10000
|
||||
}
|
||||
|
||||
var coffeeMachine = new CoffeeMachine(10000);
|
||||
```
|
||||
|
||||
В коде выше при вызове `new CoffeeMachine(10000)` в строке `(1)` кофеварка передаёт аргументы и контекст родителю вызовом `Machine.apply(this, arguments)`.
|
||||
Теперь все машины `Machine` имеют мощность `power`. Обратим внимание, что мы из параметра конструктора сразу скопировали её в объект в строке `(1)`. Иначе она была бы недоступна из наследников.
|
||||
|
||||
Можно было бы использовать `Machine.call(this, power)`, но использование `apply` гарантирует передачу всех аргументов, мало ли, вдруг мы в будущем захотим их добавить.
|
||||
В строке `(2)` мы теперь вызываем не просто `Machine.call(this)`, а расширенный вариант: `Machine.apply(this, arguments)`, который вызывает `Machine` в текущем контексте вместе с передачей текущих аргументов.
|
||||
|
||||
Далее конструктор `Machine` в строке `(2)` сохраняет `power` в свойстве объекта `this._power`, благодаря этому кофеварка, когда наследование перейдёт обратно к `CoffeeMachine`, сможет сразу обращаться к нему.
|
||||
Можно было бы использовать и более простой вызов `Machine.call(this, power)`, но использование `apply` гарантирует передачу всех аргументов, вдруг их количество увеличится -- не надо будет переписывать.
|
||||
|
||||
## Переопределение методов
|
||||
|
||||
Итак, мы получили класс `CoffeeMachine`, который наследует от `Machine`.
|
||||
|
||||
Аналогичным образом мы можем унаследовать от `Machine` холодильник `Fridge`, микроволновку `MicroOven` и другие классы, которые разделяют общий "машинный" функционал.
|
||||
Аналогичным образом мы можем унаследовать от `Machine` холодильник `Fridge`, микроволновку `MicroOven` и другие классы, которые разделяют общий "машинный" функционал, то есть имеют мощность и их можно включать/выключать.
|
||||
|
||||
Для этого достаточно вызвать `Machine` текущем контексте, а затем добавить свои методы.
|
||||
|
||||
|
|
@ -205,13 +203,15 @@ var coffeeMachine = new CoffeeMachine(10000);
|
|||
// Fridge может добавить и свои аргументы,
|
||||
// которые в Machine не будут использованы
|
||||
function Fridge(power, temperature) {
|
||||
Machine.call(this, arguments);
|
||||
Machine.apply(this, arguments);
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
Кроме создания новых методов, можно заменить унаследованные на свои:
|
||||
Бывает так, что реализация конкретного метода машины в наследнике имеет свои особенности.
|
||||
|
||||
Можно, конечно, объявить в `CoffeeMachine` свой `enable`:
|
||||
|
||||
```js
|
||||
function CoffeeMachine(power, capacity) {
|
||||
|
|
@ -224,7 +224,7 @@ function CoffeeMachine(power, capacity) {
|
|||
}
|
||||
```
|
||||
|
||||
...Однако, как правило, мы хотим не заменить, а *расширить* метод родителя. Например, сделать так, чтобы при включении кофеварка тут же запускалась.
|
||||
...Однако, как правило, мы хотим не заменить, а *расширить* метод родителя, добавить к нему что-то. Например, сделать так, чтобы при включении кофеварка тут же запускалась.
|
||||
|
||||
Для этого метод родителя предварительно копируют в переменную, и затем вызывают внутри нового `enable` -- там, где считают нужным:
|
||||
|
||||
|
|
@ -247,10 +247,10 @@ function CoffeeMachine(power) {
|
|||
**Общая схема переопределения метода (по строкам выделенного фрагмента кода):**
|
||||
|
||||
<ol>
|
||||
<li>Мы скопировали доставшийся от родителя метод `enable` в переменную, например `parentEnable`.</li>
|
||||
<li>Заменили метод `this.enable()` на свою функцию...</li>
|
||||
<li>Которая по-прежнему реализует старый функционал через вызов `parentEnable`...</li>
|
||||
<li>И в дополнение к нему делает что-то своё, например запускает приготовление кофе.</li>
|
||||
<li>Копируем доставшийся от родителя метод `this.enable` в переменную, например `parentEnable`.</li>
|
||||
<li>Заменяем `this.enable` на свою функцию...</li>
|
||||
<li>...Которая по-прежнему реализует старый функционал через вызов `parentEnable`.</li>
|
||||
<li>...И в дополнение к нему делает что-то своё, например запускает приготовление кофе.</li>
|
||||
</ol>
|
||||
|
||||
Обратим внимание на строку `(3)`.
|
||||
|
|
@ -266,15 +266,17 @@ function Machine(power) {
|
|||
|
||||
*!*
|
||||
var self = this;
|
||||
|
||||
this.enable = function() {
|
||||
// используем внешнюю переменную вместо this
|
||||
self._enabled = true;
|
||||
};
|
||||
*/!*
|
||||
|
||||
this.enable = function() {
|
||||
*!*
|
||||
// используем внешнюю переменную вместо this
|
||||
self._enabled = true;
|
||||
*/!*
|
||||
};
|
||||
|
||||
this.disable = function() {
|
||||
this._enabled = false;
|
||||
self._enabled = false;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -325,14 +327,14 @@ coffeeMachine.enable();
|
|||
```js
|
||||
function Machine(params) {
|
||||
// локальные переменные и функции доступны только внутри Machine
|
||||
var private;
|
||||
var privateProperty;
|
||||
|
||||
// публичные доступны снаружи
|
||||
this.public = ...;
|
||||
this.publicProperty = ...;
|
||||
|
||||
// защищённые доступны внутри Machine и для потомков
|
||||
// мы договариваемся не трогать их снаружи
|
||||
this._protected = ...
|
||||
this._protectedProperty = ...
|
||||
}
|
||||
|
||||
var machine = new Machine(...)
|
||||
|
|
@ -349,12 +351,12 @@ function CoffeeMachine(params) {
|
|||
Machine.apply(this, arguments);
|
||||
*/!*
|
||||
|
||||
this.coffeePublic = ...
|
||||
this.coffeePublicProperty = ...
|
||||
}
|
||||
|
||||
var coffeeMachine = new CoffeeMachine(...);
|
||||
coffeeMachine.public();
|
||||
coffeeMachine.coffeePublic();
|
||||
coffeeMachine.publicProperty();
|
||||
coffeeMachine.coffeePublicProperty();
|
||||
```
|
||||
|
||||
</li>
|
||||
|
|
@ -365,9 +367,9 @@ function CoffeeMachine(params) {
|
|||
Machine.apply(this, arguments);
|
||||
|
||||
*!*
|
||||
var parentProtected = this._protected;
|
||||
this._protected = function(args) {
|
||||
parentProtected.call(this, args); // (*)
|
||||
var parentProtected = this._protectedProperty;
|
||||
this._protectedProperty = function(args) {
|
||||
parentProtected.apply(this, args); // (*)
|
||||
// ...
|
||||
};
|
||||
*/!*
|
||||
|
|
@ -389,11 +391,11 @@ function Machine(params) {
|
|||
</li>
|
||||
</ol>
|
||||
|
||||
**В следующих главах мы будем изучать прототипный подход, который обладаем рядом преимуществ, по сравнению с функциональным.**
|
||||
Надо сказать, что способ наследования, описанный в этой главе, используется нечасто.
|
||||
|
||||
Но функциональный тоже бывает полезен.
|
||||
В следующих главах мы будем изучать прототипный подход, который обладаем рядом преимуществ.
|
||||
|
||||
В своей практике разработки я обычно наследую функционально в тех случаях, когда *уже* есть какой-то код, который на нём построен. К примеру, уже существуют классы, написанные сторонними разработчиками, которые можно доопределить или расширить только так.
|
||||
Но знать и понимать его необходимо, поскольку во многих существующих библиотеках классы написаны в функциональном стиле, и расширять/наследовать от них можно только так.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue