Функции-конструкторы и оператор new

Литерал { } отлично описывает один объект. Проблема начинается, когда объектов много и они устроены одинаково: пользователь, ещё пользователь, ещё сорок пользователей. Каждый раз выписывать одни и те же поля — скучно и легко ошибиться.

Функция-конструктор — это чертёж. Обычная функция, внутри которой описано, какие поля будут у объекта, а оператор new — команда «изготовь по этому чертежу одну штуку».

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

const vasya = new User("Вася");
console.log(vasya.name, vasya.isAdmin);

Оператор new выглядит магией, но магии там ровно на четыре действия. Он всегда делает их в одном и том же порядке, для любой функции.

Первый и четвёртый шаги в коде не видны — они происходят сами. Если дописать их руками, конструктор перестанет быть загадочным:

function User(name) {
  // this = {} — этот шаг делает new
  this.name = name;
  // return this — и этот тоже
}

console.log(new User("Аня").name);

Конструктор — не особый сорт функции. Это обычная функция, которую позвали через new. Она же, вызванная без new, — просто функция.

function User() {
  this.name = "аноним";
}

const u = new User; // обычно пишут со скобками: new User()
console.log(u.name);

Внутри конструктора this — это и есть будущий объект, ещё пустой. Всё, что вы ему присвоите, окажется в результате. Присваивать можно не только данные: функция в свойстве — это метод, и при вызове obj.method() её собственный this тоже укажет на объект.

function Counter() {
  this.value = 0;
  this.inc = function () { this.value++; };
}

const c = new Counter();
c.inc();
console.log(c.value);

Обратите внимание: return в конструкторе обычно не пишут — объект вернётся сам. Но если написать, у языка есть на этот счёт отдельное правило.

function A() { this.x = 1; return { y: 2 }; }
function B() { this.x = 1; return 42; }

console.log(new A().y);
console.log(new B().x);

Конструкторы принято называть с большой буквы: User, Point, Counter. Движку всё равно — new сработает и с user. Это договорённость между людьми: заглавная буква говорит «меня зовут через new», и по одному имени в чужом коде видно, вызов это или изготовление объекта.

А вот чего договорённостями не обойти: стрелочная функция конструктором быть не может. У неё нет собственного this, и new с ней падает.

const Tag = (name) => ({ name });

try {
  new Tag("h1");
} catch (e) {
  console.log(e.constructor.name);
}

Внутри любой функции доступно специальное значение new.target. При обычном вызове оно равно undefined, при вызове через new — самой функции. Это единственный честный способ узнать изнутри, как вас позвали.

function Test() {
  console.log(Boolean(new.target));
}

Test();
new Test();

Чаще всего его используют для подстраховки: если new забыли, конструктор дописывает его сам. Приём известный, но злоупотреблять им не стоит: код, который работает и так и эдак, читать труднее. Иногда полезнее наоборот — бросить понятную ошибку.

function User(name) {
  if (!new.target) return new User(name);
  this.name = name;
}

console.log(User("Аня").name);

Функции-конструкторы никуда не делись, но в современном коде ту же задачу обычно решает class. Механика под капотом та же самая: new делает свои четыре шага, this означает новый объект. Меняется только запись — тело конструктора переезжает в метод constructor, а остальные методы пишутся рядом. Эту запись подробно разбирает статья «Классы: синтаксис».

class User {
  constructor(name) {
    this.name = name;
  }
  hello() { return "Привет, " + this.name; }
}

console.log(new User("Аня").hello());

Есть и приятная разница: в нашем Counter метод inc копировался в каждый объект, а методы класса лежат в одном общем месте — прототипе. Что это такое, разберём в главе «Прототипы и классы», начиная со статьи «Прототипное наследование»; пока достаточно знать, что классы — не новый механизм, а удобная обёртка вокруг уже знакомого.