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

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

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

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

Контент

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

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

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

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

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

## Коротко

| Властивість | Де знаходиться | Що зберігає |
|---|---|---|
| `__proto__` | У **об'єкта** | Посилання на **його прототип** |
| `prototype` | У **функції-конструктора або класу** | Об'єкт, який стане **прототипом для створюваних об'єктів** |

- `__proto__` → **вже створеного об'єкта**
- `prototype` → **у конструктора (шаблону), за яким створюються об'єкти**

---

## Приклад для розуміння

```javascript
function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  console.log(`Привіт, ${this.name}`);
};

const tim = new User('Tim');
```

Тепер подивимось, що відбувається:

```javascript
console.log(tim.__proto__ === User.prototype); // true
console.log(User.prototype.constructor === User); // true
```

Розшифровка:

1. `User.prototype` - це об'єкт, який містить методи (`sayHi`) і слугує **прототипом для всіх об'єктів**, створених через `new User()`.
2. `tim.__proto__` - це **посилання** на той самий об'єкт `User.prototype`.

---

## Візуально

```javascript
User (function)
│
├── prototype  ──►  { sayHi(), constructor: User }
│
└── new User('Tim')  →  tim {
                         name: 'Tim',
                         __proto__: User.prototype
                       }
```

Тобто `__proto__` створеного об'єкта → вказує на `prototype` функції, яка його створила.

---

## Простими словами

| Властивість | Про що каже | Приклад |
|---|---|---|
| `prototype` | "Що отримають мої діти" | `User.prototype.sayHi = ...` |
| `__proto__` | "Хто мій батько" | `tim.__proto__ === User.prototype` |

---

## Приклад з ланцюжком

```javascript
function Animal() {}
Animal.prototype.eats = true;

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.barks = true;

const rex = new Dog();

console.log(rex.barks); // true (в Dog.prototype)
console.log(rex.eats);  // true (в Animal.prototype)
```

Ланцюжок виглядає так:

```javascript
rex.__proto__ → Dog.prototype → Animal.prototype → Object.prototype → null
```

---

## У всіх об'єктів є `__proto__`,
а `prototype` є **тільки у функцій і класів**

```javascript
const obj = {};
console.log(obj.__proto__);       // Object.prototype
console.log(obj.prototype);       // undefined

function Foo() {}
console.log(Foo.prototype);       // { constructor: Foo }
console.log(Foo.__proto__);       // Function.prototype
```

У звичайних об'єктів немає `prototype`, а у функцій-конструкторів є **обидва**: і `prototype`, і `__proto__`.

---

## У сучасних реаліях

Властивість `__proto__` вважається **застарілою (legacy)**. Рекомендується використовувати сучасні аналоги:

```javascript
Object.getPrototypeOf(obj); // замість obj.__proto__
Object.setPrototypeOf(obj, proto); // замість obj.__proto__ = proto
```

---

## Підсумкова таблиця

| Властивість | Де використовується | Що зберігає | Коли застосовується |
|---|---|---|---|
| `__proto__` | у **об'єкта** | посилання на його **реальний прототип** | коли потрібно дізнатися "хто мій батько" |
| `prototype` | у **функції-конструктора або класу** | об'єкт, який стане **прототипом створюваних об'єктів** | коли створюєш методи, доступні всім екземплярам |

---

## Ключовий зв'язок

```javascript
instance.__proto__ === Constructor.prototype
```

> Кожен об'єкт, створений через `new Constructor()`, отримує посилання на `Constructor.prototype` у своїй внутрішній властивості `__proto__`.

---

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

> `prototype` - це "план" або "шаблон", звідки беруться методи для нових об'єктів.
> `__proto__` - це "вказівник" об'єкта на той шаблон, звідки він усе успадковує.

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

Для рев’юера

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

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