Знайомство з прототипами

3.1 Концепція прототипів

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

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

Цей прототип може мати свої власні прототипи, утворюючи ланцюжок прототипів (prototype chain). Властивості й методи об'єкта можуть бути успадковані через цей ланцюжок. Це дозволяє об'єктам ділитися функціональністю і створювати ієрархії об'єктів.

Властивість proto

У JavaScript у кожного об'єкта є властивість __proto__, яке вказує на його прототип. Це властивість використовується для пошуку властивостей і методів, якщо вони не знайдені в самому об'єкті.

У цьому прикладі об'єкт child наслідує метод greet() від об'єкта parent:

    
      const parent = {
        greet() {
          console.log('Привіт від батька');
        }
      };

      const child = {
        __proto__: parent
      };

      child.greet(); // Виведе: Привіт від батька
    
  

3.2 Створення і використання прототипів

1. Object.create()

Метод Object.create() дозволяє створити новий об'єкт із вказаним прототипом.

Приклад:

    
      const parent = {
        greet() {
          console.log('Привіт від батька');
        }
      };

      const child = Object.create(parent);
      child.greet(); // Виведе: Привіт від батька
    
  

2. Додавання властивостей і методів у прототип

Властивості й методи можна додати в прототип, щоб вони були доступні всім об'єктам, які його наслідують.

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

    
      const animal = {
        speak() {
          console.log(`${this.name} видає звук.`);
        }
      };

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Виведе: Buddy видає звук.
    
  

3. Зміна прототипу об'єкта

Прототип об'єкта можна змінити за допомогою методу Object.setPrototypeOf().

У цьому прикладі прототип об'єкта duck змінюється з animal на bird:

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

      const bird = {
        fly() {
          console.log('Птах летить');
        }
      };

      const duck = {
        __proto__: animal,
        quack() {
          console.log('Качка крякає');
        }
      };

      Object.setPrototypeOf(duck, bird);
      duck.fly();   // Виведе: Птах летить
      duck.quack(); // Виведе: Качка крякає
    
  

3.3 Робота з прототипами

1. Перевірка прототипу об'єкта

Метод Object.getPrototypeOf() дозволяє отримати прототип об'єкта.

Приклад:

    
      const parent = {
        greet() {
          console.log('Привіт від батька');
        }
      };

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Виведе: true
    
  

2. Перевірка належності об'єкта до прототипу

Оператор instanceof використовується для перевірки, чи є об'єкт екземпляром певного конструктора або прототипу.

Приклад:

    
      function Person(name) {
        this.name = name;
      }

      const john = new Person('Джон');

      console.log(john instanceof Person); // Виведе: true
    
  

3. Перебір властивостей об'єкта та його прототипу

Для перебору властивостей об'єкта та його прототипу можна використовувати цикл for...in, який перелічує всі перелічувані властивості.

Приклад:

    
      const parent = {
        greet() {
          console.log('Привіт від батька');
        }
      };

      const child = Object.create(parent);
      child.name = 'Дитина';

      for (let key in child) {
        console.log(key);
      }

      // Виведе:
      // name
      // greet
    
  

Для перебору тільки власних властивостей об'єкта використовується метод Object.keys() або цикл for...of із методом Object.entries().

Приклад:

    
      const parent = {
        greet() {
          console.log('Привіт від батька');
        }
      };

      const child = Object.create(parent);
      child.name = 'Дитина';

      console.log(Object.keys(child)); // Виведе: ['name']

      for (const [key, value] of Object.entries(child)) {
        console.log(key, value);
      }

      // Виведе:
      // name Дитина