Конструкторы в JavaScript — это функции, которые используются для создания новых объектов. Когда функция-конструктор вызывается с оператором new, она создает новый объект и инициализирует его свойства. Функции-конструкторы могут содержать параметры, которые передаются при создании нового объекта, и методы, которые добавляются в прототип объекта.

В общем виде, конструктор в JavaScript объявляется как обычная функция, но с определенными соглашениями:

function ConstructorName(param1, param2, ...) {
  // Тело конструктора
  // Инициализация свойств объекта с помощью ключевого слова this
  // Определение методов объекта
}

Здесь ConstructorName — название конструктора (обычно используется заглавная буква в начале), а param1, param2, и так далее — параметры, которые могут быть переданы в конструктор для инициализации свойств объекта.

Внутри тела конструктора вы можете использовать ключевое слово this, которое ссылается на создаваемый объект. С помощью this вы можете присваивать значения свойствам объекта и определять методы.

Чтобы создать новый объект с помощью конструктора, используйте оператор new перед вызовом функции-конструктора:

var objectName = new ConstructorName(arg1, arg2, ...);

Здесь objectName — имя переменной, которой будет присвоен созданный объект, ConstructorName — имя конструктора, а arg1, arg2, и так далее — аргументы, которые могут быть переданы в конструктор для инициализации свойств объекта.

Таким образом, конструктор в JavaScript позволяет создавать новые объекты с определенными свойствами и методами, обеспечивая повторное использование кода и удобство работы с объектами.

Навигация по статье

Зачем нужны конструкторы функций

Конструкторы в JavaScript очень полезны для создания объектов с заданными свойствами и методами. Они позволяют нам создавать множество объектов одного типа, используя общий шаблон или модель.

Представьте, что у вас есть магазин, в котором продается много различных продуктов. Каждый продукт имеет название, цену и описание. Вместо того чтобы вручную создавать объекты для каждого продукта, вы можете использовать конструктор, чтобы упростить этот процесс.

Пример использования конструктора для создания объектов «Продукт»:

function Product(name, price, description) {
  this.name = name;
  this.price = price;
  this.description = description;
}

// Создание новых продуктов с помощью конструктора
var phone = new Product("Смартфон", 1000, "Мощный смартфон с большим экраном");
var laptop = new Product("Ноутбук", 1500, "Портативный компьютер для работы и развлечений");

В этом примере конструктор Product принимает параметры name, price и description. При использовании оператора new мы можем создать новые объекты «Продукт», передавая значения этих параметров. Конструктор автоматически инициализирует свойства объекта name, price и description с заданными значениями.

Таким образом, конструктор позволяет нам создавать объекты «Продукт» с нужными свойствами, минимизируя дублирование кода. Мы можем легко создавать новые продукты, используя один и тот же шаблон конструктора, и легко получать доступ к свойствам каждого продукта.

Отличие конструкторов функций от конструкторов классов

Конструкторы функций и конструкторы классов в JavaScript отличаются следующим образом:

Синтаксис: Конструкторы функций используют ключевое слово «function», а конструкторы классов используют ключевое слово «class».
Прототипы: Конструкторы функций добавляют методы и свойства на прототип объекта, в то время как конструкторы классов объявляют методы непосредственно внутри класса, и они автоматически становятся частью прототипа объектов.
Наследование: Конструкторы классов предоставляют удобный способ определения наследования с помощью ключевого слова «extends», тогда как конструкторы функций требуют более ручного управления прототипами для реализации наследования.
Область видимости: Переменные, объявленные внутри конструкторов функций, видны только внутри функции, тогда как переменные, объявленные внутри классов, видны только внутри класса.
Удобство: Конструкторы классов предоставляют более удобный синтаксис для создания и настройки объектов, так как позволяют определять свойства и методы непосредственно внутри класса без явного использования прототипов.

В общем, конструкторы функций более гибкие и предоставляют больший контроль над объектами и прототипами, в то время как конструкторы классов обеспечивают более удобный и читаемый синтаксис для работы с объектами и наследованием.

Примеры использования конструкторов функций

Счетчик

Данный пример кода демонстрирует использование конструктора функции Counter, который создает объекты со счетчиком и методом для его инкремента.

function Counter() {
  this.count = 0;

  this.increment = function() {
    this.count++;
  };
}

var counter1 = new Counter();
var counter2 = new Counter();

counter1.increment();
console.log(counter1.count); // Выведет 1
console.log(counter2.count); // Выведет 0

Транзакции в банке

Пример управления транзакциями в банковской системе.

function Transaction(amount, date) {
  this.amount = amount;
  this.date = date;
  this.balance = 10000; // Начальное значение общего баланса

  this.execute = function() {
    console.log("Выполнение транзакции на сумму " + this.amount + " рублей.");
    this.updateBalance();
  };

  this.getBalance = function() {
    console.log("Текущий баланс: " + this.balance + " рублей.");
  };

  this.updateBalance = function() {
    this.balance -= this.amount;
  };
}

var transaction1 = new Transaction(500, "2023-06-07");
transaction1.execute(); // Выведет "Выполнение транзакции на сумму 500 рублей."
transaction1.getBalance(); // Выведет "Текущий баланс: 9500 рублей."

var transaction2 = new Transaction(1000, "2023-06-08");
transaction2.execute(); // Выведет "Выполнение транзакции на сумму 1000 рублей."
transaction2.getBalance(); // Выведет "Текущий баланс: 8500 рублей."

Интернет-магазин

Вот пример работы с товарами в интернет-магазине, где можно добавлять и удалять товары из массива, а также выводить список товаров

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function ShoppingCart() {
  this.products = [];

  this.addProduct = function(product) {
    this.products.push(product);
    console.log("Товар " + product.name + " добавлен в корзину.");
  };

  this.removeProduct = function(product) {
    var index = this.products.indexOf(product);
    if (index !== -1) {
      this.products.splice(index, 1);
      console.log("Товар " + product.name + " удален из корзины.");
    }
  };

  this.showProducts = function() {
    if (this.products.length === 0) {
      console.log("Корзина пуста.");
    } else {
      console.log("Список товаров в корзине:");
      this.products.forEach(function(product) {
        console.log("- " + product.name + " (цена: " + product.price + " рублей)");
      });
    }
  };
}

var shoppingCart = new ShoppingCart();

var product1 = new Product("Смартфон", 1000);
var product2 = new Product("Наушники", 500);
var product3 = new Product("Флешка", 200);

shoppingCart.addProduct(product1); // Выведет "Товар Смартфон добавлен в корзину."
shoppingCart.addProduct(product2); // Выведет "Товар Наушники добавлен в корзину."
shoppingCart.showProducts();
// Выведет:
// Список товаров в корзине:
// - Смартфон (цена: 1000 рублей)
// - Наушники (цена: 500 рублей)

shoppingCart.removeProduct(product1); // Выведет "Товар Смартфон удален из корзины."
shoppingCart.showProducts();
// Выведет:
// Список товаров в корзине:
// - Наушники (цена: 500 рублей)

shoppingCart.addProduct(product3); // Выведет "Товар Флешка добавлен в корзину."
shoppingCart.showProducts();
// Выведет:
// Список товаров в корзине:
// - Наушники (цена: 500 рублей)
// - Флешка (цена: 200 рублей)