> Можно ли вызвать функцию-конструктор через оператор new в JavaScript? (JavaScript)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: IT-One
Стек: JavaScript
> Пример ответа
Короткий ответ
Да, можно. Оператор new создаёт новый объект, устанавливает его прототип на prototype функции-конструктора, выполняет тело функции с this, указывающим на этот объект, и возвращает созданный объект (если функция не возвращает другой объект явно). Это стандартный механизм создания экземпляров через конструктор.
Подробное объяснение
Оператор new в JavaScript выполняет четыре шага:
- Создаёт новый пустой объект.
- Устанавливает прототип этого объекта на
Constructor.prototype. - Вызывает функцию-конструктор с
this, привязанным к новому объекту. - Если конструктор не возвращает объект явно, возвращает созданный объект.
Важно: любая функция (включая стрелочные, но с оговорками) может быть вызвана через new, но не все функции корректно работают как конструкторы. Стрелочные функции не имеют собственного this и prototype, поэтому вызов через new выбросит TypeError. Обычные функции и классы (синтаксический сахар над функциями-конструкторами) поддерживают new нативно.
Ключевой момент для senior-уровня: если конструктор явно возвращает примитив, он игнорируется, и возвращается созданный объект. Если возвращается объект (не null), то возвращается именно он, а не созданный объект. Это поведение называется "return override".
На практике
При разработке на фронтенде new используется редко напрямую, чаще через классы или фабрики. Однако понимание механики критично для:
- Работы с устаревшим кодом (ES5-стиль).
- Написания polyfill'ов.
- Реализации собственных библиотек, где требуется контроль над созданием объектов.
- Отладки ошибок, связанных с потерей
thisили неправильным прототипом.
Также важно помнить, что вызов конструктора без new (например, Person("Alice")) приведёт к загрязнению глобального объекта (в нестрогом режиме) или ошибке (в strict mode). Для защиты от этого используют паттерн "instanceof check" или ES6 классы, которые требуют new.
Пример кода
JAVASCRIPTfunction Person(name) {this.name = name;// Явный возврат объекта переопределяет созданный// return { custom: true }; // вернётся этот объект}const alice = new Person('Alice');console.log(alice.name); // 'Alice'console.log(alice instanceof Person); // true// Стрелочная функция не может быть конструкторомconst ArrowPerson = (name) => { this.name = name; };// new ArrowPerson('Bob'); // TypeError: ArrowPerson is not a constructor// Класс требует newclass Animal {constructor(type) {this.type = type;}}const dog = new Animal('mammal');// Animal('mammal'); // TypeError: Class constructor Animal cannot be invoked without 'new'
Как отвечать на собеседовании
Начни с краткого утверждения, затем опиши механизм работы new по шагам. Упомяни разницу между обычными функциями, стрелочными и классами. Приведи пример с return override. Для senior-уровня добавь про strict mode, глобальное загрязнение и паттерны защиты. Заверши практическим применением в legacy-коде или при написании библиотек.
Что проверяет интервьюер
- Глубокое понимание прототипного наследования и механизма
new. - Знание граничных случаев (return override, стрелочные функции, strict mode).
- Умение объяснить разницу между функциями-конструкторами и классами.
- Понимание, когда и зачем использовать
newв реальной разработке.
Типичные ошибки
- Утверждение, что
newработает только с классами (на самом деле с любой обычной функцией). - Игнорирование return override: кандидат забывает, что явный возврат объекта заменяет созданный.
- Путаница с прототипом:
newустанавливает[[Prototype]]наConstructor.prototype, а не на сам конструктор. - Незнание, что стрелочные функции не могут быть конструкторами.
- Отсутствие упоминания strict mode и последствий вызова конструктора без
new.
> Похожие задачи по frontend
Зачем на обертке модального окна навешивать id и проверять таргет клика для закрытия модалки
Влияет ли добавление async/await на порядок вывода в консоли?
Как работает оператор switch в JavaScript и что он возвращает
Что означает запись с rest оператором в деструктуризации массива в JavaScript
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью