Конструктор объектов в JS

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

Конструкторы в JavaScript — один из этапов создания объектов. Это специальные функции, которые позволяют инициализировать свойства объекта до создания. Например:

// конструктор объекта Person
function Person () {
    this.name = 'Андрей',
    this.age = 23
}

// создание объекта
const person = new Person();

В этом примере function Person() — конструктор. Объект person создается с помощью ключевого слова new. 

Совет. Правило хорошего тона — записывать имя функции-конструктора с большой буквы. 

Создание нескольких объектов с помощью одного конструктора

В JavaScript с помощью одного конструктора можно создать несколько объектов. Например, вот так:

// функция-конструктор
function Person () {
    this.name = 'Андрей',
    this.age = 23,
}

// создание объектов
const person1 = new Person();
const person2 = new Person();

// доступ к свойствам
console.log(person1.name);  // Вывод: Андрей
console.log(person2.name);  // Вывод: Андрей

Ключевое слово this в конструкторе

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

// функция-конструктор 
function Person () {
    this.name = 'Андрей',
}

// создание объекта
const person1 = new Person();

// доступ к свойству name
console.log(person1.name);  // Вывод: Андрей

Когда мы создаем объект person1 с помощью конструктора Person(), this ссылается на person1. Свойство name = 'Андрей' присваивается person1.

Конструктор с параметрами

В JavaScript можно указать параметры для функции-конструктора. При создании объекта нужно будет передать соответсвующие аргументы.

// функция-конструктор с параметрами
function Person (person_name, person_age, person_gender) {

   // инициализируем свойства соответствующими параметрами
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

}

// создание объекта — передаем аргументы
const person1 = new Person('Андрей', 23, 'М');
const person2 = new Person('Маша', 25, 'Ж');

// доступ к свойствам объектов
console.log(person1.age); // Вывод: 23 
console.log(person2.name); // Вывод: Маша

Отличие простого объявления от конструктора

Количество объектов

→ Без конструктора можно обойтись, если создается один объект.

Например, если нам нужен объект одного человека — можно просто объявить его. 

let person = {
    name: 'Андрей'
}

→ Конструктор полезен, если нужно создавать несколько объектов.

Если предполагается несколько объектов человек — лучше использовать конструктор.

function Person () {
    this.name = 'Андрей'
}

let person1 = new Person();
let person2 = new Person();

Уникальность объектов

→ Объекты, созданные без конструктора, не уникальны. Это значит, что если изменить какое-то свойство у переменной такого объекта, изменения отразяться и на оригинальном объекте. Например:

let person = {
    name: 'Андрей'
}

console.log(person.name); // Вывод: Андрей

// создаем переменную student, которая является объектом person
let student = person;

// изменяем свойство name
student.name = 'Дима';

// изменения затронули не только переменную student,
// но и объект person
console.log(person.name); // Вывод: Дима

→ Объекты, созданные с помощью конструктора, уникальны. Поэтому каждому объекту после создания можно отдельно добавлять свойства, которых не было в конструторе.

function Person () {
    this.name = 'Андрей'
}

let person1 = new Person();
let person2 = new Person();

// добавляем новое свойство age объекту person1
person1.age = 20;

Теперь свойство age есть только у объекта person1. А у объекта person2 его нет.

Добавление свойств и методов в объект

В объект можно добавить свойства и методы следующим образом:

function Person () {
    this.name = 'Андрей',
    this.age = 23
}

// создание объектов
let person1 = new Person();
let person2 = new Person();

// добавление нового свойства gender объекту person1
person1.gender = 'М';

// добавление нового свойства greet объекту person
person1.greet = function () {
    console.log('Привет');
}

person1.greet();   // Вывод: Привет

// Следующий код вызовет ошибку, 
// поскольку у объекта person2 нет метода greet()
person2.greet();

Вывод:

Привет
Uncaught TypeError: person2.greet is not a function

В этом выше примере к объекту person1 добавляется новое свойство gender и новый метод greet().

Однако эти свойства и метод не добавляются к объекту person2. Получить доступ к gender или greet() из person2 не получится — это вызовет ошибку.

Встроенные конструкторы

В JavaScript уже встроено большое количество конструкторов. Вот некоторые из них для примера:

let a = new Object();    // новый объект типо Object
let b = new String();    // новый объект типо String
let c = new Number();    // новый объект типо Number
let d = new Boolean();   // новый объект типо Boolean

Как использовать

Вот несколько примеров того, как можно создавать объекты некоторых типов:

Строки

let name = new String ('Андрей');
console.log(name); // Вывод: Андрей

Числа

let number = new Number (57);
console.log(number); // Вывод: 57

Логические значения

let count = new Boolean(true);
console.log(count); // Вывод: true

Совет. Лучше все же использовать примитивные типы данных и создавать соответствующие переменные как обычно let name = 'Андрей', let number = 57 и let count = true. Создание через объекты будет сильно нагружать программу.