Наслідування через прототипи

4.1 Наслідування — це просто

Наслідування — це фундаментальна концепція об'єктно-орієнтованого програмування (ООП), яка дозволяє одному класу (званому дочірнім або підкласом) наслідувати поля та методи іншого класу (званого батьківським або суперкласом).

Такий підхід дозволяє створювати більш загальні класи та повторно використовувати код, покращуючи організацію та підтримуваність коду.

Навіщо потрібне наслідування?

Припустимо тобі потрібно написати якийсь код, і ти вирішив зробити це у вигляді класу. Потім ти дізнався, що у твоєму проєкті вже існує клас, який робить майже все, що потрібно тобі у твоєму класі. Ти можеш просто скопіювати код цього класу у свій і використовувати на свій смак.

А можеш «ніби скопіювати». Ти можеш оголосити цей клас батьком свого класу, і тоді JavaScript додасть твоєму класу поведінку класу-батька.

Уяви, що ти природа і хочеш створити Собаку. Що буде швидше: створити собаку з бактерії за мільярд років чи одомашнити вовка за 200 тисяч?

4.2 Концепція наслідування через прототипи

Наслідування через прототипи у JavaScript — це один із основних механізмів, що дозволяє об'єктам наслідувати властивості та методи інших об'єктів. Це дозволяє створювати складні ієрархії об'єктів і повторно використовувати код.

Кожен об'єкт у JavaScript має приховану властивість [[Prototype]], яка вказує на його прототип. Прототипи використовуються для реалізації наслідування, що дозволяє об'єктам наслідувати властивості та методи від інших об'єктів.

Приклад простого наслідування

Крок 1: Створення базового об'єкта

    
      const animal = {
        eat() {
          console.log('Їм...');
        },

        sleep() {
          console.log('Сплю...');
        }
      };
    
  

Крок 2: Створення об'єкта-наслідника

    
      const dog = Object.create(animal);

      dog.bark = function() {
        console.log('Гавкаю...');
      };
    
  

Крок 3: Використання наслідованих властивостей та методів

    
      dog.eat();   // Виведе: Їм...
      dog.sleep(); // Виведе: Сплю...
      dog.bark();  // Виведе: Гавкаю...
    
  

У цьому прикладі об'єкт dog наслідує методи eat() і sleep() від об'єкта animal і додає свій метод — bark().

4.3 Глибоке наслідування через прототипи

Ланцюг прототипів

У JavaScript наслідування може бути складнішим, коли об'єкти наслідують один одного, утворюючи ланцюг прототипів.

Приклад ланцюга прототипів

У цьому прикладі об'єкт dog наслідується від mammal, який своєю чергою наслідується від animal. Це створює ланцюг прототипів, де dog має доступ до всіх методів mammal і animal.

    
      const animal = {
        eat() {
          console.log('Їм...');
        }
      };

      const mammal = Object.create(animal);

      mammal.walk = function() {
        console.log('Ходжу...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Гавкаю...');
      };

      dog.eat();   // Виведе: Їм...
      dog.walk();  // Виведе: Ходжу...
      dog.bark();  // Виведе: Гавкаю...
    
  

Перевірка ланцюга прототипів

Метод isPrototypeOf() дозволяє перевірити, чи є об'єкт прототипом іншого об'єкта.

Приклад:

    
      console.log(animal.isPrototypeOf(mammal)); // Виведе: true
      console.log(mammal.isPrototypeOf(dog));    // Виведе: true
      console.log(animal.isPrototypeOf(dog));    // Виведе: true
    
  

4.4 Перевизначення методів

Наслідування через прототипи дозволяє не тільки додавати нові методи, але й перевизначати існуючі методи.

Приклад перевизначення методів

У цьому прикладі метод speak() у об'єкта dog перевизначає метод speak() у об'єкта animal:

    
      const animal = {
        speak() {
          console.log('Тварина говорить');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        console.log('Собака гавкає');
      };

      animal.speak(); // Виведе: Тварина говорить
      dog.speak();    // Виведе: Собака гавкає
    
  

Виклик методу батьківського об'єкта

Для виклику методу батьківського об'єкта у JavaScript можна використовувати метод call() або apply().

Приклад:

    
      const animal = {
        speak() {
          console.log('Тварина говорить');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        animal.speak.call(this);
        console.log('Собака гавкає');
      };

      dog.speak();

      // Виведе:
      // Тварина говорить
      // Собака гавкає
    
  

4.5 Поглиблене використання прототипного наслідування

Розширення вбудованих об'єктів

Ви можете розширювати вбудовані об'єкти JavaScript, додаючи методи до їх прототипів.

Приклад:

    
      Array.prototype.sum = function() {
        return this.reduce((acc, value) => acc + value, 0);
      };

      const numbers = [1, 2, 3, 4, 5];

      console.log(numbers.sum()); // Виведе: 15
    
  

Створення багаторівневих ієрархій

Ви можете створювати більш складні багаторівневі ієрархії об'єктів за допомогою прототипного наслідування.

Приклад:

    
      const livingBeing = {
        breathe() {
          console.log('Дихаю...');
        }
      };

      const animal = Object.create(livingBeing);
      animal.eat = function() {
        console.log('Їм...');
      };

      const mammal = Object.create(animal);
      mammal.walk = function() {
        console.log('Ходжу...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Гавкаю...');
      };

      dog.breathe(); // Виведе: Дихаю...
      dog.eat();     // Виведе: Їм...
      dog.walk();    // Виведе: Ходжу...
      dog.bark();    // Виведе: Гавкаю...