Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Ланцюжок прототипів». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**ланцюжок прототипів (prototype chain)** - це **механізм успадкування в JavaScript**,
через який під час звернення до властивості чи методу об'єкт
шукає його **не лише в себе**, але й **у своїх "батьків" (прототипів)**.

---

## Коротко

Кожен об'єкт у JS має приховане посилання на інший об'єкт -
свій **прототип** (`[[Prototype]]`),
і якщо потрібна властивість не знайдена в самому об'єкті,
JS шукає її **в прототипі**, потім **у прототипі прототипу** і так далі,
поки не дійде до `null`.

Ця послідовність і називається **ланцюжок прототипів**.

---

## Приклад - базовий

```javascript
const animal = { eats: true };
const dog = Object.create(animal); // dog успадковує від animal
dog.barks = true;

console.log(dog.barks); // true  (знайшов у dog)
console.log(dog.eats);  // true  (знайшов у animal)
console.log(dog.toString); // [Function: toString] (успадковано від Object.prototype)
```

Що відбувається:

```javascript
dog -> animal -> Object.prototype -> null
```

JS йде по ланцюжку:

1. Шукає `barks` у `dog` -> знайдено
2. Шукає `eats` у `dog` -> немає -> йде в `animal` -> знайдено
3. Шукає `toString` -> немає в `animal` -> йде в `Object.prototype` -> знайдено
4. Далі `Object.prototype.__proto__` = `null` -> кінець ланцюжка

---

## Візуально

```javascript
dog {
  barks: true
}
  ^
  animal {
    eats: true
  }
  ^
  Object.prototype {
    toString(), hasOwnProperty(), ...
  }
  ^
  null
```

---

## Приклад з методами

```javascript
const animal = {
  walk() {
    console.log('Тварина йде');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Гав!');
};

dog.walk(); // "Тварина йде" (метод знайдено у прототипу)
dog.bark(); // "Гав!" (метод знайдено у dog)
```

JS не копіює методи, а **знаходить їх під час виклику через ланцюжок**.

---

## Перевірка прототипу

```javascript
console.log(Object.getPrototypeOf(dog) === animal); // true
```

Можна також перевірити за допомогою оператора `instanceof`:

```javascript
console.log(dog instanceof Object); // true (тому що в ланцюжку є Object.prototype)
```

---

## Приклад з класами (той самий принцип)

```javascript
class Animal {
  eat() { console.log('Їм'); }
}

class Dog extends Animal {
  bark() { console.log('Гав'); }
}

const rex = new Dog();
rex.bark(); // "Гав"
rex.eat();  // "Їм" (успадковано від Animal)
```

Під капотом це той самий механізм:

```javascript
rex -> Dog.prototype -> Animal.prototype -> Object.prototype -> null
```

---

## Якщо властивість знайдено - пошук зупиняється

```javascript
const animal = { eats: true };
const dog = Object.create(animal);
dog.eats = false;

console.log(dog.eats); // false (знайшов у самому dog, далі не шукає)
```

JS завжди використовує **першу знайдену властивість** у ланцюжку.

---

## Можна змінити прототип вручну (але небажано)

```javascript
const cat = { meow: true };
Object.setPrototypeOf(dog, cat);

console.log(dog.meow); // true
```

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

---

## Підсумок

| Етап | Що відбувається |
|---|---|
| 1 | JS шукає властивість у самому об'єкті |
| 2 | Якщо немає - йде у прототип (`[[Prototype]]`) |
| 3 | Потім - у прототип прототипу |
| 4 | І так далі, поки не дійде до `null` |
| Якщо не знайдено ніде | Повертає `undefined` |

---

## Приклад підсумкової схеми

```javascript
rex -> Dog.prototype -> Animal.prototype -> Object.prototype -> null
```

| Рівень | Де зберігається | Приклад |
|---|---|---|
| rex | власні властивості | `rex.name = 'Rex'` |
| Dog.prototype | методи класу Dog | `bark()` |
| Animal.prototype | методи базового класу | `eat()` |
| Object.prototype | стандартні методи | `toString()`, `hasOwnProperty()` |

---

**В одній фразі:**

> **Ланцюжок прототипів** - це шлях, яким JavaScript **шукає властивості й методи**,
> переходячи від об'єкта до його прототипу,
> поки не знайде потрібне або не дійде до `null`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати585 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.