В чем разница между обычной функцией и функцией-конструктором?

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

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

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

  • Обычная функция вызывается напрямую: [func()]
  • Функция-конструктор вызывается с [new]: [new Func()]
  • В конструкторе [this] становится новым объектом
  • Конструктор автоматически возвращает [this]
// Обычная функция
function greet(name) {
  return 'Привет, ' + name;
}
greet('Иван'); // 'Привет, Иван'
 
// Функция-конструктор
function User(name) {
  this.name = name;
}
const user = new User('Иван');
console.log(user.name); // 'Иван'

Полный ответ

Разница между обычной функцией и функцией-конструктором — как разница между обычной ложкой и черпаком. Оба предмета похожи, но используются для разных целей! 🥄

Что такое обычная функция

Обычная функция — это блок кода, который можно вызвать для выполнения каких-то действий или вычислений:

function add(a, b) {
  return a + b;
}
 
const result = add(5, 3); // 8

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

Функция-конструктор — это обычная функция, которая используется для создания объектов:

function Car(brand) {
  this.brand = brand;
}
 
const myCar = new Car('Toyota');
console.log(myCar.brand); // 'Toyota'

Главные отличия

Способ вызова

function Example() {
  this.value = 'test';
}
 
// Обычный вызов
const regular = Example(); // undefined (в строгом режиме)
 
// Вызов как конструктор
const constructor = new Example(); // объект { value: 'test' }

Работа с this

function Test() {
  this.name = 'Тест';
}
 
// В обычной функции this зависит от контекста
Test(); // this → window/undefined
 
// В конструкторе this всегда новый объект
new Test(); // this → {} (новый объект)

Возврат значений

function Regular() {
  return 'результат';
}
 
function Constructor() {
  this.value = 'объект';
  // автоматически return this
}
 
Regular();        // 'результат'
new Constructor(); // объект { value: 'объект' }

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

Обычная функция

// Делает что-то и возвращает результат
function calculateTax(price) {
  return price * 0.2;
}
 
const tax = calculateTax(100); // 20

Функция-конструктор

// Создаёт объекты одного типа
function Product(name, price) {
  this.name = name;
  this.price = price;
}
 
const product1 = new Product('Книга', 500);
const product2 = new Product('Ручка', 50);
 
console.log(product1.name); // 'Книга'
console.log(product2.name); // 'Ручка'

Когда использовать что

Обычные функции

// Для выполнения действий
function showMessage(message) {
  console.log(message);
}
 
// Для вычислений
function sum(a, b) {
  return a + b;
}

Функции-конструкторы

// Для создания однотипных объектов
function User(name, email) {
  this.name = name;
  this.email = email;
}
 
// Создаем пользователей
const user1 = new User('Иван', 'ivan@example.com');
const user2 = new User('Петр', 'petr@example.com');

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

Путаница в вызовах

function Animal(name) {
  this.name = name;
}
 
// ❌ Ошибка — вызвали конструктор как обычную функцию
const animal = Animal('Лев');
console.log(animal); // undefined
 
// ✅ Правильно — использовали new
const animal2 = new Animal('Лев');
console.log(animal2.name); // 'Лев'

Ожидание объекта

function CreateCounter() {
  this.count = 0;
}
 
// ❌ Будет ошибка
// const counter = CreateCounter(); // undefined
// counter.count++; // Cannot read property 'count' of undefined
 
// ✅ Правильно
const counter = new CreateCounter();
counter.count++; // работает

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

  1. Обычная функция — выполняет код и может возвращать значение 🏃
  2. Конструктор — создаёт объекты с помощью [new] 🏗️
  3. this в обычной функции — зависит от контекста 🤔
  4. this в конструкторе — всегда новый объект 🎯
  5. Вызов — обычная [func()], конструктор [new Func()] 🆕

Понимание разницы помогает правильно выбирать, когда использовать обычные функции, а когда конструкторы. Это важно для написания чистого и понятного кода! 💪


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