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

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

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

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

Контент

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

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

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

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

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

**Чистий об'єкт (його ще називають object dictionary) - це об'єкт без прототипа, тобто без `Object.prototype` і всіх його вбудованих методів на кшталт `toString` чи `hasOwnProperty`.** Такий об'єкт чудово підходить для чистих сховищ даних, словників і мап, де треба бути впевненим, що жодна вбудована властивість не перетнеться з вашими ключами.

## Теорія

### TL;DR

- Чистий об'єкт створюється викликом `Object.create(null)`.
- У нього `Object.getPrototypeOf(obj)` дорівнює `null`, ланцюжка прототипів немає взагалі.
- Він не має ні `toString`, ні `hasOwnProperty`, ні спеціальної поведінки `__proto__`.
- Тому ключі `toString` або `__proto__` стають звичайними ключами і нічого не ламають.
- Перевіряти наявність властивості треба через `Object.prototype.hasOwnProperty.call(obj, key)` або `Object.hasOwn(obj, key)`.
- Сучасна альтернатива для словників, це `Map`.

### Швидкий приклад

Найпростіший і правильний спосіб:

```javascript
const obj = Object.create(null);
```

Це створює об'єкт без прототипа: `obj.__proto__` дорівнює `undefined`, а `Object.getPrototypeOf(obj)` дорівнює `null`.

Перевіримо:

```javascript
const obj = Object.create(null);

console.log(Object.getPrototypeOf(obj)); // null
console.log('__proto__' in obj);         // false
console.log(typeof obj.toString);        // "undefined"
```

У такого об'єкта немає ланцюжка успадкування: він не успадковує навіть від `Object.prototype`.

### Чому це корисно

Звичайні об'єкти успадковують купу вбудованих методів:

```javascript
const normal = {};
console.log(Object.getPrototypeOf(normal) === Object.prototype); // true

// Ці методи доступні
console.log(normal.hasOwnProperty); // [Function]
console.log(normal.toString);       // [Function]
```

Це може бути небезпечно, якщо ключі перетинаються з цими іменами:

```javascript
const map = {};
map.toString = 'value'; // може зламати код, якщо хтось викличе map.toString()
```

Чистий об'єкт знімає цю проблему:

```javascript
const map = Object.create(null);
map.toString = 'value';    // просто ключ
console.log(map.toString); // "value"
```

### Приклад використання: словники й мапи

```javascript
const dict = Object.create(null);

dict.apple = 1;
dict.banana = 2;
dict['__proto__'] = 3; // безпечно, не впливає на прототип

console.log(dict.apple);        // 1
console.log(dict['__proto__']); // 3
```

У звичайних об'єктах `__proto__` має особливу поведінку (це аксесор з `Object.prototype`), а тут це звичайна властивість. Саме тому чисті об'єкти часто використовують для кешів і для розбору даних, що прийшли ззовні: вони природно захищені від prototype pollution.

### Недолік: немає вбудованих методів

```javascript
const obj = Object.create(null);

obj.name = 'Alice';

console.log(obj.hasOwnProperty('name')); // TypeError: obj.hasOwnProperty is not a function
```

Якщо треба перевірити наявність властивості, скористайтеся безпечним способом:

```javascript
console.log(Object.prototype.hasOwnProperty.call(obj, 'name')); // true
console.log(Object.hasOwn(obj, 'name'));                        // true, сучасний варіант
```

Те саме стосується `toString()`: такий об'єкт не можна просто конкатенувати з рядком, а `console.log` у деяких середовищах показує його як `[Object: null prototype]`.

### Альтернатива: використовувати `Map`

Сучасний спосіб зберігати словники:

```javascript
const map = new Map();
map.set('apple', 1);
map.set('__proto__', 2);

console.log(map.get('__proto__')); // 2
```

`Map` розв'язує ту саму задачу, але дозволяє будь-які ключі, зокрема об'єкти, зберігає порядок вставки і має властивість `size`.

### Підсумок

| Спосіб | Прототип | Доступ до вбудованих методів | Підходить для словників |
| --- | --- | --- | --- |
| `{}` | `Object.prototype` | є (`toString`, `hasOwnProperty`) | ризиковано |
| `Object.create(null)` | `null` | немає | так |
| `new Map()` | не звичайний об'єкт | методи `set`, `get`, `has` | так, сучасний варіант |

> Щоб створити чистий об'єкт без `Object.prototype`, використовуйте `const obj = Object.create(null)`: він не успадковує нічого і чудово підходить для безпечних словників.

### Типові помилки

- **Викликати `obj.hasOwnProperty(key)` на чистому об'єкті.** Отримаєте `TypeError`, бо методу просто немає. Використовуйте `Object.hasOwn(obj, key)`.
- **Плутати `Object.create(null)` з `{}`.** Другий варіант успадковує від `Object.prototype` з усіма наслідками.
- **Передавати чистий об'єкт у код, який очікує звичайний.** Бібліотека, яка всередині викликає `value.toString()`, впаде.
- **Думати, що `JSON.stringify` не працює.** Він працює нормально, проблеми виникають саме з неявним приведенням до рядка.
- **Використовувати чистий об'єкт там, де краще підійде `Map`.** Якщо ключі не рядки або потрібен розмір і порядок, беріть `Map`.
- **Забувати, що об'єкт з `JSON.parse` звичайний.** Розбір зовнішнього JSON дає об'єкт з прототипом, тому перевіряйте ключ `__proto__` перед злиттям.

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

Для рев’юера

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

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