Наследование объектов (object inheritance)

Вводная информация

1. В JS реализовано так называемое "прототипическое наследование". Каждый дочерний об-т имеет ссылку на родительский, а значит на все его свойства и методы. Таким образом, родительский об-т является прототипом для дочернего
2. В основе всех об-тов лежит встроенный JS об-т Object. Для об-тов это object Object, для массивов object Array, для функций object Function и т.д. (см документ objects-and-types.html). Т.е. корневой встроенный об-т является прототипом для всех дочерних. Соответственно, все дочерние будут наследовать его свойства и методы
Листинг 1. Определение прототипа массива
```
        const a = []
        console.log( Object.prototype.toString.call(a) ) // [object Array]
        console.log( a )
```
Вывод в консоль Листинга 1 покажет нам, что у любого массива есть 2 св-ва length - длина массива и [[Prototype]] - содержит ссылку на встроенный об-т Array(), который в свою очередь содержит кучу стандартных методов массива (find, filter и т.д.)

Рис. 1 Прототип всех массивов object Array и его методы

Как видим, обычный массив JS имеет своим прототипом объект, который содержит такие методы, как concat, filter, find и много других. То есть стандартные методы любого массива

Рис. 2 Схема прототипического наследования на примере массивов

Рис. 3 Прототипом всех типов данных в JS является один корневой об-т

Наследование об-тов

1. Наследование об-тов в JS осуществляется через Object.create
Листинг 2. Наследование простых об-тов
```
        const a = {
            x: 1
        }

        // ОБ-Т b ЯВЛЯЕТСЯ ДОЧЕРНИМ ДЛЯ a
        // А ЗНАЧИТ НАСЛЕДУЕТ ВСЕ ЕГО СВ-ВА И МЕТОДЫ 
        const b = Object.create(a)

        // b ИМЕЕТ ДОСТУП КО ВСЕМ СВ-ВАМ И МЕТОДАМ ОБ-ТА a
        b.x // 1

        b.y = 2

        // НО a УЖЕ ДОСТУПА К СВ-ВАМ И МЕТОДАМ ОБ-ТА b НЕ ИМЕЕТ
        a.y // undefined
```
Рис. 4 Стандартное наследование об-тов
- 2. Интроспекция (установка связи между об-тами) или Определение прототипа об-та. В примере выше об-т b является дочерним для об-та a, а значит говорится, что об-т а является прототипом для об-та b. Программно это определяется через метод Object.getPrototypeOf, а проверка, какой об-т является прототипом проверяемого через isPrototypeOf
  Листинг 3. Получение прототипа об-та через Object.getPrototypeOf
```
    const a = {
        x: 1
    }

    const b = Object.create(a)
    b.y = 2

    // БЕРЁМ ПРОТОТИП ОБ-ТА b
    // ОЧЕВИДНО, ИМ ЯВЛЯЕТСЯ ОБ-Т а
    Object.getPrototypeOf(b) // а
```
  Листинг 4. В родительской цепочке getPrototypeOf всегда указывает на корневой родительский об-т
```
   const a = {
        x: 1
    }

    // a - РОДИТЕЛЬСКИЙ ДЛЯ b
    const b = Object.create(a)
    b.y = 2

    // b - РОДИТЕЛЬСКИЙ ДЛЯ c
    const c = Object.create(b)
    c.y = 3

    // getPrototypeOf В ЦЕПОЧКЕ РОДИТЕЛЬСКИХ ПРОТОТИПОВ 
    // ВСЕГДА УКАЗЫВАЕТСЯ НА САМЫЙ ПЕРВЫЙ ОБ-Т
    // ХОТЯ РОДИТЕЛЬСКИМ ДЛЯ c ЯВЛЯЕТСЯ ОБ-Т b
    Object.getPrototypeOf(c) // а
```
  Листинг 5. Проверка прототипа об-та с помощью isPrototypeOf
```
        const a = {
            x: 1
        }

        const b = Object.create(a)
        b.y = 2

        // а ЯВЛЯЕТСЯ ПРОТОТИПОМ ДЛЯ b 
        a.isPrototypeOf(b) // true
                                            
        // НО ОЧЕВИДНО, ЧТО b НЕ ЯВЛЯЕТСЯ ПРОТОТИПОМ ДЛЯ а 
        b.isPrototypeOf(a) // false
```
- 3. Проверка св-в и методов. Проверка на предмет того, являются ли св-ва об-та его собственными или унаследованными от родительских об-тов осуществляется с помощью метода hasOwnProperty
  Листинг 6. Проверка родных и унаследованных св-в об-та
```
    const a = {
        x: 1
    }

    const b = Object.create(a)
    b.y = 2


    // y ЯВЛЯЕТСЯ СОБСТВЕННЫМ СВ-ВОМ ОБ-ТА b
    b.hasOwnProperty('y')   // true

    // x ЯВЛЯЕТСЯ УНАСЛЕДОВАНЫМ ОТ a
    // ХОТЯ b ИМЕЕТ К НЕМУ ДОСТУП b.x = 1
    // НО РОДНЫМ СВ-ВОМ ОБ-ТА b, СВ-ВО x НЕ ЯВЛЯЕТСЯ
    b.hasOwnProperty('x')   // false
```
Наследование через ф-цию - конструктор
- 1. Пример приведённый в Листинге 2, хотя и имеет смысл, редко применяется на практике. В реальной практике для более универсальной работы с об-тами и их наследованием применяются классы, которые рассмотрены в соответствующем разделе. До появления классов эту роль выполняла ф-ция - конструктор. Т.е., стандартная ф-ция, которая вызывается с помощью ключевого слова new.
  
  Все примеры идущие ниже основаны на использовании ф-ции - конструктора, которая является полным заменителем классов. Поэтому в отношении неё и создаваемых ею об-тов будем пользоваться, как термином "ф-ция-конструктор", так и терминами "класс" и "экземпляр класса"
  
  Современный синтаксис классов в JS это не что иное, как синтаксическая обёртка для ф-ции - конструктора, которая упрощает работу с ней
  Листинг 7. Простое наследование с использованием ф-ции конструктора без параметров
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User() {
        }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student() {
            User.call(this)
        }
```
  Листинг 3 показывает, что в рамках области видимости ф-ции Student, мы вызываем ф-цию User, но крепим к ней this ф-ции Student
  
  Рис. 5 Стандартное наследование с помощью ф-ции конструктора
  
  Чтобы Листинг 3 был более понятен, покажем пример с наследованием свойств. У класса User есть св-ва name (имя пользователя) и age (возраст). Мы хотим, чтобы производный от него класс Student их наследовал и имел кроме того своё св-во faculty (факультет)
  Листинг 8. Наследование класса вместе со св-вами
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User(name, age) {
            this.name = name
            this.age = age
        }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student(name, age, faculty) {
            // СВЯЗЫВАЕМ С РОДИТЕЛЬСКИМ КЛАССОМ - ПРИВЯЗЫВАЕМ this Ф-ЦИИ Student К Ф-ЦИИ User
            User.call(this, name, age)

            // ДОБАВЛЯЕМ НОВОЕ СВ-ВО
            this.faculty = faculty
        }

        const student1 = new Student('Me', 25, 'economic')

        console.log(student1)
```
  Добавим ещё один дочерний класс Teacher (преподаватель). И новые св-ва для него faculty (факультет) и salary (зарплата)
  Листинг 9. Добавляем ещё один дочерний класс Teacher
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User(name, age) {
            this.name = name
            this.age = age
        }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student(name, age, faculty) {
            // СВЯЗЫВАЕМ С РОДИТЕЛЬСКИМ КЛАССОМ
            User.call(this, name, age)

            // ДОБАВЛЯЕМ НОВОЕ СВ-ВО
            this.faculty = faculty
        }

        const student1 = new Student('Max', 25, 'economic')
        console.log(student1)


        // ДОЧЕРНИЙ "КЛАСС"
        function Teacher(name, age, faculty, salary) {
            User.call(this, name, age)

            // ДОБАВЛЯЕМ НОВОЕ СВ-ВО
            this.faculty = faculty
            this.salary = salary  
        }

        const Teacher1 = new Teacher('Den', 35, 'economic', 1000)
        console.log(Teacher1)
```
  Таким образом, цепочка наследования будет следующая (рис. 6)
  
  Рис. 6 Один об-т может быть родительским для многих дочерних
  
  Смысл наследования для классов Teacher и Student класса User заключается в том, чтобы взять от класса User общую логику, а не прописывать её в каждом классе заново (в данном случае, это св-ва name и age, которые являются общими для каждого класса). А потом добавить уже свои чисто специфические св-ва, к пример salary (зарплата) - св-во, которое есть только у Преподавателя, но не может быть у Студента. Св-ва же name (имя) и age (возраст), есть у них обоих
- 2. Наследование методов.
  - В обычных об-тах можно создавать только публичные методы
  - В ф-циях - конструкторах можно создавать, как публичные, так и приватные методы
  - Все рассматриваемые ниже методы являются публичными. Создание приватных методов в ф-циях см в документе properties-and-methods.html
  Простое наследование метдов
  Листинг 10. Класс Student вместе со св-вами name и age унаследует и метод getData()
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User(name, age) {
            this.name = name
            this.age = age
            this.getData = function(){
                return `${this.name} ${this.age}`
            }
        }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student(name, age, faculty) {
            User.call(this, name, age)
            this.faculty = faculty
        }

        const student1 = new Student('Max', 25, 'economic')

        // КЛАСС Student УНАСЛЕДУЕТ МЕТОД getData У КЛАССА User
        // КОТОРЫЙ ВЫВОДИТ СВ-ВА name И age
        console.log(student1.getData())  // Max 25
```
  Методы, как и св-ва можно перезаписать
  Листинг 11. Перезаписывание ("затенение") метода (также можно перезаписать и св-ва)
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User(name, age) {
            this.name = name
            this.age = age
            this.getData = function(){
                return `${this.name} ${this.age}`
            }
        }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student(name, age, faculty) {
            User.call(this, name, age)
            this.faculty = faculty
            // МЕТОД МОЖНО ПЕРЕЗАПИСАТЬ
            // В ТАКОМ СЛУЧАЕ, ЭТО БУДЕТ НЕ УНАСЛЕДОВАННЫЙ ОТ User МЕТОД
            // А НОВЫЙ, СОБСТВЕННЫЙ МЕТОД КЛАССА Student
            this.getData = function(){
                return `${this.name} ${this.age} ${this.faculty}`
            }
        }

        const student1 = new Student('Max', 25, 'economic')

        // СОБСТВЕННЫЙ МЕТОД КЛАССА Student 
        // КОТОРЫЙ ВЫВОДИТ СВ-ВА name, age, faculty
        console.log(student1.getData())  // Max 25 economic
```
  У вышеприведённого способа наследования методов есть недостаток, а именно: при инициализации об-та дочернего класса родительский метод копируется в дочерний класс, в то время, как в JS есть возможность передать метод по ссылке. Т.о., метод будет создан один раз в родительском классе, а в дочерних классах он будет просто ссылаться на родительский. Для этого в ф-циях - конструкторах существует св-во prototype
  Листинг 12. Более правильный способ создания методов, это использовать встроенный в ф-цию - конструктор св-во prototype
```
        // РОДИТЕЛЬСКИЙ "КЛАСС"
        function User(name, age) {
            this.name = name
            this.age = age
        }

        // ДОБАВЛЯЕМ МЕТОД getData В ПРОТОТИП КЛАСС User
        User.prototype.getData = function(){
                return `${this.name} ${this.age}`
            }

        // ДОЧЕРНИЙ "КЛАСС"
        function Student(name, age, faculty) {
            User.call(this, name, age)
            this.faculty = faculty
        }

        // КОПИРУЕМ ОБ-Т ПРОТОТИПА User.prototype В Student.prototype
        Student.prototype = Object.create(User.prototype)

        const student1 = new Student('Max', 25, 'economic')

        console.log(student1.getData())  // Max 25	
```
  Листинг 13. Необходимо скорректировать, чтобы Student.prototype.constructor был равен Student, а не User
```
   Object.defineProperty(Student.prototype, 'constructor', {
        value: Student,
        enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
        writable: true
    });
```
- 3. Интроспекция (установка связи между об-тами) в ф-ции - конструкторе. Для определения прототипа об-та (то есть, содержится ли такой об-т в родительской цепочке для данного экземпляра) используется оператор instanceof
  
  Рекомендуется использовать instanceof вместе с ф-цией конструктором или классом, т.к. при работе с чистыми об-тами могут быть непредсказуемые эффекты. Для проверки прототипа в обычных об-тах использовать isPrototyprOf
  Листинг 14. Использование оператора instanceof для определения прототипов экземпляра класса
```
        function User(){}

        function Student(){
            User.call(this)
        }

        Student.prototype = Object.create(User.prototype)
        Student.prototype.constructor = Student

        const student1 = new Student()

        // ОБ-Т student1 ЯВЛЯЕТСЯ ЭКЗЕМПЛЯРОМ КЛАССА Student
        student1 instanceof Student // true

        // ОБ-Т student1 НЕ ЯВЛЯЕТСЯ ЭКЗЕМПЛЯРОМ КЛАССА User
        // НО КЛАСС User НАХОДИТСЯ В ЦЕПОЧКЕ ПРОТОТИПОВ КЛАССА Student
        // ОТ КОТОРОГО ОБРАЗОВАН ОБ-Т student1
        student1 instanceof User // true


        function Test(){}

        // ОЧЕВИДНО, ЧТО КЛАСС Test НЕ ИМЕЕТ К ОБ-ТУ student1 
        // НИКАКОГО ОТНОШЕНИЯ
        student1 instanceof Test // false
```
Выводы по главе

1. Простые об-ты наследуются через Object.create

2. Ф-ции - конструкторы наследуются через Object.create сохраняемые в св-ве prototype

3. Созданные методы ф-ций - конструкторов правильнее хранить также в св-ве prototype

4. Интроспекцию (определение прототипа) простых об-тов проводить через isPrototypeOf, а ф-ций - конструкторов через instanceof

Упражнения

Задачи ниже решаются в строгом режиме

1.
Создать обычный об-т Figure (фигура). Создать от него два дочерних об-та Rectangle (четырёхугольник) и Circle (окружность). Figure должен содержать поле square (площадь) и метод getSquare, который должен его возвращать. Дочерние об-ты должны иметь метод setSquare, который принимает об-т параметров (для четырёхугольника - 2 стороны: a, b И для окружности - радиус: r) и возвращать вычисленный результат. При получении параметров, приводить их к числовому типу (Number), затем делать проверку (isNaN) - если проверка не пройдена, выводить сообщение в консоль и завершать выполнение программы выбросом ошибки (throw new Error())

Проверка работы программы - вызов метода setSquare с соответствующими параметрами и getSquare для получения результата

Площадь четырёхугольника: S = a * b

Площадь окружности: S = π * r^2

2. Выполнить задачу 1, но вместо обычных об-тов использовать ф-цию конструктор. Методы должны быть публичными (добавленными в прототип класса)

Наследование объектов (object inheritance)

Вводная информация

Наследование об-тов

Наследование через ф-цию - конструктор

Выводы по главе

Упражнения