Що таке прототип? Як працює прототипне наслідування в JS?

Повне пояснення

Що це і навіщо

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

Ключові принципи

• [[Prototype]] (зазвичай доступний через __proto__ або Object.getPrototypeOf) – внутрішній зв’язок між об’єктом і його прототипом.
• Prototype chain – ланцюжок, що починається з конкретного об’єкта і йде до Object.prototype, а потім до null.
• Property lookup – при доступі до властивості JS спочатку шукає в об’єкті, потім у прототипі, і так далі.

Як це працює

1. Створюється об’єкт: const obj = { a: 1 };.
2. Внутрішній зв’язок obj.[[Prototype]] вказує на об’єкт, який створював його (наприклад, Object.prototype).
3. Якщо звернутися до obj.b, JS шукає b в obj. Не знаходить – переходить до прототипу, шукає там. Якщо знайде, повертає значення.
4. При створенні функції-конструктора function Person(){} і виклику new Person(), новий об’єкт отримує прототип, що вказаний у Person.prototype.

Практика і реалізація

function Person(name){ this.name = name; }
Person.prototype.greet = function(){ console.log(`Hi, ${this.name}`); };
const alice = new Person('Alice');
alice.greet(); // Hi, Alice

У цьому прикладі greet знаходиться в прототипі, а не у власних властивостях.

Тестування

import { test, expect } from 'vitest';
function Person(name){ this.name = name; }
Person.prototype.sayHi = () => 'hi';
const p = new Person('Bob');
test('prototype method', () => {
  expect(p.sayHi()).toBe('hi');
});

Дизайн‑рішення

• Використовуйте Object.create(proto) для створення об’єктів без конструктора.
• Для класичного наслідування використовуйте class синтаксис: class Animal{} → class Dog extends Animal{}.

Оптимізація

• Уникайте зміни Object.prototype, оскільки це впливає на всі об’єкти.
• Для великих колекцій використовуйте Object.setPrototypeOf лише при необхідності, бо це повільно.

Часті помилки

1. this в прототипних методах – не використовуйте arrow functions, бо вони беруть this з зовнішнього контексту.
2. Неправильний ланцюжок – перевіряйте Object.getPrototypeOf(obj) === expectedProto.
3. Перезапис властивостей – не створюйте нові властивості з тим же ім’ям, що в прототипі.
4. Мутування Object.prototype – це глобальна зміна, що може призвести до непередбачуваних помилок.
5. Невірне використання new – без new функція-конструктор виконується як звичайна функція.
6. Використання __proto__ – це deprecated, використовуйте Object.getPrototypeOf.
7. Неправильне визначення властивостей – використовуйте Object.defineProperty для контролю доступу.
8. Загроможені прототипи – уникайте глибоких ланцюжків, це знижує продуктивність.

Cheatsheet

• Object.getPrototypeOf(obj) – отримати прототип.
• Object.setPrototypeOf(obj, proto) – встановити новий прототип (не рекомендується часто).
• Object.create(proto, [properties]) – створити об’єкт з заданим прототипом.
• class A{} → A.prototype – доступ до прототипу.

Follow‑up питання

1. Як працює Object.isExtensible у контексті прототипів?
2. Чому arrow functions не підходять для методів, що використовують this?
3. Які переваги має класичне наслідування (class extends) над функціями-конструкторами?