Что такое функция-конструктор?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Функции #База JS

Краткий ответ

Функция-конструктор — это обычная функция, которая используется для создания объектов одного типа. По сути, это “шаблон” или “чертёж” для создания однотипных объектов. Функции-конструкторы вызываются с ключевым словом [new].

// Функция-конструктор
function User(name, age) {
  this.name = name;
  this.age = age;
}
 
// Создание объектов
const user1 = new User('Иван', 25);
const user2 = new User('Петр', 30);
 
console.log(user1.name); // 'Иван'
console.log(user2.name); // 'Петр'

Полный ответ

Функция-конструктор — это просто обычная функция, которая работает как “фабрика” по производству однотипных объектов. Представьте, что это как станок на заводе, который делает одинаковые детали. 🏭

Что такое функция-конструктор

Это обычная функция, но с особым предназначением — создавать объекты. Отличительная особенность: вызывается с ключевым словом [new].

Простые примеры

Базовый конструктор

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
  this.start = function() {
    console.log(this.brand + ' ' + this.model + ' завелась');
  };
}
 
// Создаем автомобили по "чертежу"
const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Civic');
 
car1.start(); // 'Toyota Camry завелась'
car2.start(); // 'Honda Civic завелась'

Конструктор без параметров

function Counter() {
  this.value = 0;
  this.increment = function() {
    this.value++;
  };
}
 
const counter = new Counter();
counter.increment();
console.log(counter.value); // 1

Как работает конструктор

Ключевое слово new

function Person(name) {
  // this автоматически становится пустым объектом {}
  this.name = name;
  // return this; (происходит автоматически)
}
 
const person = new Person('Иван');
// 1. Создается пустой объект {}
// 2. Этот объект становится this
// 3. Выполняется код функции
// 4. Автоматически возвращается this

Что происходит “под капотом”

// Когда вы пишете:
new User('Иван');
 
// JavaScript делает:
// 1. const obj = {}; (создаёт пустой объект)
// 2. obj.__proto__ = User.prototype; (настраивает прототип)
// 3. User.call(obj, 'Иван'); (вызывает функцию с obj как this)
// 4. return obj; (возвращает объект)

Когда использовать конструкторы

Для создания однотипных объектов

function Book(title, author) {
  this.title = title;
  this.author = author;
  this.getInfo = function() {
    return this.title + ' by ' + this.author;
  };
}
 
// Создаем библиотеку
const books = [
  new Book('Война и мир', 'Толстой'),
  new Book('Преступление и наказание', 'Достоевский'),
  new Book('Мастер и Маргарита', 'Булгаков')
];

Для организации кода

function Calculator() {
  this.add = function(a, b) {
    return a + b;
  };
  
  this.multiply = function(a, b) {
    return a * b;
  };
}
 
const calc = new Calculator();
console.log(calc.add(5, 3)); // 8

Частые ошибки

Забыть ключевое слово new

function User(name) {
  this.name = name;
}
 
// ❌ Без new — this будет window/undefined
const user = User('Иван');
console.log(user); // undefined
console.log(window.name); // 'Иван' (в нестрогом режиме)
 
// ✅ С new — всё работает правильно
const user2 = new User('Иван');
console.log(user2.name); // 'Иван'

Стрелочные функции как конструкторы

// ❌ Стрелочные функции не могут быть конструкторами
const User = (name) => {
  this.name = name;
};
 
// new User('Иван'); // Ошибка!
 
// ✅ Обычные функции работают
function User(name) {
  this.name = name;
}
 
new User('Иван'); // Работает!

Простые правила

  1. Конструктор — функция для создания однотипных объектов 🏗️
  2. Вызов с new — обязательно использовать ключевое слово new 🆕
  3. this — внутри конструктора автоматически становится новым объектом 🎯
  4. Возврат — конструктор автоматически возвращает this 📤
  5. Имя с заглавной буквы — по соглашению начинается с большой буквы 📝

Функции-конструкторы — это удобный способ создавать множество однотипных объектов. Это основа объектно-ориентированного программирования в JavaScript! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪