Оператор new

JavaScriptJunior~1 хв читання

Синтаксис

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	Повертає об'єкт (або те, що поверне конструктор)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.