Ресурсы: Функции-конструкторы
Создадим новую функцию с двумя аргументами:
Код
function User(name, id) {
}
Внутри мы запишем свойство, которое будет отображаться также, как в объекте:
Код
function User(name, id) {
this.name = name;
this.id = id;
}
У каждого пользователя будет свои уникальный идентификатор и имя, которые мы будем задавать во время создания наших пользователей.
Запишем также одно общее для всех пользователей свойство
Код
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
}
Теперь наша функция стала
конструктором и с его помощью мы можем создавать новых пользователей.
Код
const ivan = new User('Ivan', 28);
const alex = new User('Alex', 32);
Внутри этой переменной у нас будет находиться уже не функция, а объект, потому что после вызова функции-конструктора с помощью ключевого слова
new, она создаёт новый объект с теми свойствами, которые мы в ней записали.
Теперь выведем в консоль эти две переменные:
Код
console.log(ivan);
console.log(alex);
Цитата
User { name: 'Ivan', id: 28, human: true }
User { name: 'Alex', id: 32, human: true }
Кроме свойств в функцию-конструктор мы можем добавлять методы:
Код
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
this.hello = function() {
console.log(`Hello, ${this.name}`);
}
}
Пробуем вызвать метод для какого-то юзера:
Код
ivan.hello();
alex.hello();
Цитата
Hello, Ivan
Hello, Alex
C помощью свойства
prototype мы можем добавлять методы и свойства в функцию-конструктор и они будут прототипно наследоваться его потомками, это используется когда у нас нет доступа к нашему прототипу, но его нужно немного модифицировать.
Например, добавим какой-то метод
exit Код
User.prototype.exit = function() {
console.log(`Пользователь ${this.name} ушёл`);
}
Теперь этот метод будет протипно наследоваться и станет доступным у всех потомков, которые были созданы после объявления этого метода.
Код
ivan.exit(); // Пользователь Ivan ушёл
Конструкторы необходимы для создания новых однотипных объектов, например, новые пользователи сайта, товары в магазинах, ролики в соцсетях, везде, где есть шаблонизация. В том числе, таким образом могут создаваться компоненты сайтов.
Например, на одной и той же странице есть несколько слайдеров, но у одного из них 5 слайдов, в другом 10, у одного есть автопереключение, у другого нет.
Параметры для этих слайдеров мы можем задавать как аргументы при их создании, но в используемом для этого конструкторе будут какие-то и одинаковые для всех слайдеров свойства.
Цитата
В стандарте ES6 появились
классы - так называемый,
синтаксический сахар, красивая обёртка для функционала. Они удобны для использования и весь функционал в настоящее время пишется с их использованием.
Выглядят они так:
Код
class User {
constructor(name, id) {
this.name = name;
this.id = id;
this.human = true;
}
hello() {
console.log(`Hello, ${this.name}`);
}
exit() {
console.log(`Пользователь ${this.name} ушёл`);
}
}
Добавлять комментарии могут только зарегистрированные пользователи.
