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

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

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

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

Контент

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

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

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

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

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

## Синтаксис

```javascript
const obj = new Constructor(...args);
```

- `Constructor` - функція або клас, який викликається через `new`;
- `...args` - аргументи, що передаються конструктору;
- результат - **новий об'єкт**, створений за шаблоном конструктора.

---

## Що робить `new` під капотом (покроково)

Коли ти пишеш:

```javascript
const user = new User('Oleh');
```

Рушій виконує **чотири кроки**:

---

### 1. Створюється новий порожній об'єкт

```javascript
const obj = {};
```

---

### 2. Встановлюється прототип

Новий об'єкт отримує посилання на прототип конструктора:

```javascript
obj.__proto__ = User.prototype;
```

Це означає, що `obj` успадковує методи з `User.prototype`.

---

### 3. Виконується сам конструктор

Функція `User` викликається, і `this` **всередині неї вказує на новий об'єкт**:

```javascript
const result = User.call(obj, 'Oleh');
```

---

### 4. Повертається об'єкт

Якщо конструктор **повертає об'єкт вручну** → повертається він.
Інакше → повертається `obj`, створений на кроці 1.

```javascript
return typeof result === 'object' ? result : obj;
```

---

## Приклад із функцією-конструктором

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

const user = new User('Oleh');

console.log(user.name);    // "Oleh"
console.log(user.isAdmin); // false
```

> Без `new` `this` вказував би на `window` (у браузері) або `undefined` (у строгому режимі).
> Тому важливо завжди викликати конструктори з `new`.

---

## Приклад з класом

```javascript
class Car {
  constructor(model) {
    this.model = model;
  }

drive() {
    console.log(`${this.model} їде`);
  }
}

const tesla = new Car('Tesla');
tesla.drive(); // "Tesla їде"
```

> Класи - це просто **синтаксичний цукор** над функціями-конструкторами.
> Під капотом `new` працює точно так само.

---

## Приклад з об'єктом, що повертається

Якщо функція-конструктор **повертає об'єкт вручну**,
він **замінює результат** `new`:

```javascript
function User(name) {
  this.name = name;
  return { name: 'Перевизначений' };
}

const u = new User('Oleh');
console.log(u.name); // "Перевизначений"
```

Якщо повертається **примітив**, він **ігнорується**:

```javascript
function Product(name) {
  this.name = name;
  return 123; // ігнорується
}

const p = new Product('Phone');
console.log(p.name); // "Phone"
```

---

## Приклад без `new`

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

const a1 = Animal('Кіт');  // виклик без new
console.log(a1);           // undefined
console.log(globalThis.name); // "Кіт" - записалося в глобальну область
```

> Тому завжди викликай конструктори **через** `new`,
> або додавай захист усередині функції:

```javascript
function Animal(name) {
  if (!(this instanceof Animal)) {
    return new Animal(name);
  }
  this.name = name;
}
```

---

## Використання з вбудованими конструкторами

```javascript
const date = new Date();
const reg = new RegExp('\\d+');
const arr = new Array(3); // [ <3 empty items> ]
const obj = new Object(); // {}
```

> Майже всі вбудовані класи (`Date`, `Map`, `Set`, `Error`, `RegExp`, `Promise`) вимагають `new`.

---

## Підсумок

| Крок | Що робить `new` |
|---|---|
| 1 | Створює новий порожній об'єкт |
| 2 | Встановлює прототип `obj.__proto__ = Constructor.prototype` |
| 3 | Викликає конструктор з `this = obj` |
| 4 | Повертає об'єкт (або те, що поверне конструктор) |

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

Для рев’юера

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

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