Главная » Функции-конструкторы

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


12.06.2021, 18:32
Функция - это объект со своими свойствами и методами.

Функция-конструктор - это обычная функция, но имеющая свои особенности.

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

Имя функции-конструктора должно начинаться с большой буквы, а вызывается эта функция с помощью оператора new

В JavaScript предусмотрены конструкторы для встроенных типов, например:

Код

let o = new Object(); /* создаёт пустой объект, аналог {} */
let a = new Array(); /* создаёт пустой массив, аналог [] */
let d = new Date(); /* создаёт объект Date, представляющий текущее время */
let m = new Map(); /* создаёт объект Map для отображения ключ/значение */

Пример функции-конструктора:

Код

function User(name, id) {
  this.name = name;
  this.id = id;
  this.human = true;
}

С помощью этой функции мы сможем создать, например, новых пользователей:

Код

const ivan = new User('Ivan', 28);

Внутри этой переменной мы получаем уже объект, так как при вызове функции-конструктора она создаёт новый объект со свойствами, которые изначально записаны в функции-конструкторе.

По сути, результат вызова new User('Ivan', 28) - это объект:

Код

const ivan = {
  name: 'Ivan',
  id: 28,
  human: true
}

Создаём ещё одного юзера (ещё один объект):

Код

const alex = new User('Alex', 20);

Если в консоль вывести переменные ivan и alex:


User { name: 'Ivan', id: 28, human: true }
User { name: 'Alex', id: 20, human: true }

В функцию-конструктор (раз это объект) мы можем добавлять методы. Добавим какой-нибудь метод:

Код

function User(name, id) {
  this.name = name;
  this.id = id;
  this.human = true;
  this.hello = function() {
  console.log(`Hello ${this.name}`);
  };
}

Вызываем этот метод для ivan и alex:

Код

ivan.hello(); /* Hello Ivan */
alex.hello(); /* Hello Alex */

При помощи свойства Prototype можно добавлять новые свойства и методы в конструктор и они будут прототипно наследоваться у потомков (так делается, если нет доступа к прототипу, либо если мы его почему-либо не можем изменять).

Например, добавим метод exit:

Код

User.prototype.exit = function() {
  console.log(`Юзер ${this.name} ушёл`);
};

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

Код

ivan.exit(); // => Юзер Ivan ушёл

Классы - новое в стандарте ES6

Классы - это "синтаксический сахар", красивая обёртка существующего функционала.

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

КОММЕНТАРИИ (0)