Далее на странице...
- Функции конструкторы Ключевое слово this Функции-конструкторы используются как прототип объекта
- Свойство prototype Добавление в функцию-конструктор методов/свойств
По классификации типов данных в JavaScript функция является объектом и в нее можно записать свойства и методы.
Создание новой функции с методами и свойствами - это создание нового объекта.
Функции конструкторы
JavaScript-код
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
}
1. Создание новой функции/объекта User(name, id) с двумя параметрами.
2. Чтобы записать в эту функцию свойства и методы используется ключевое слово this.
3. Например, this.name = name - значение свойства name (this.name) функции берется из параметра .
Это функция-конструктор. В данном случае с помощью этой функции есть возможность создавать новых пользователей.
JavaScript-код
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
}
const ivan = new User('Ivan', 28);
const olga = new User('Olga', 35);
Внутри каждой из переменных ivan и olga находится уже не функция, а объект со свойствами, записанными в функцию-конструктор.
Функции-конструкторы - Методы
Помимо свойств, как в примере выше, функции-конструкторы также могут содержать и методы.
JavaScript-код
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
// 1* Внутри метода работаем со свойством
this.hello = function() {
console.log(`Hello ${this.name}`);
};
}
const ivan = new User('Ivan', 28);
const olga = new User('Olga', 35);
console.log(ivan);
console.log(olga);
ivan.hello();
olga.hello();
Функции-конструкторы используются как прототип объекта.
Метод, указанный в прототипе, наследуется каждым из потомков.
Таким образом, каждый из потомков является объектом и содержит все свойства и методы прототипа.
Свойство prototype
Свойство prototype - позволяет добавлять в функцию-конструктор (прототип) методы и свойства, которые наследуются каждым из потомков.
JavaScript-код
'use strict';
function User(name, id) {
this.name = name;
this.id = id;
this.human = true;
this.hello = function() { // 1* Внутри метода работаем со свойством
console.log(`Hello ${this.name}`);
};
}
// 2* prototype - Добавление метода exit в функцию-конструктор
User.prototype.exit = function() {
console.log(`Пользователь ${this.name} вышел`);
};
const ivan = new User('Ivan', 28);
const olga = new User('Olga', 35);
console.log(ivan);
console.log(olga);
ivan.hello();
olga.hello();
ivan.exit();
olga.exit();
Результат в консоли
User {name: 'Ivan', id: 28, human: true, hello: ?}
User {name: 'Olga', id: 35, human: true, hello: ?}
Hello Ivan
Hello Olga
Пользователь Ivan вышел
Пользователь Olga вышел
Результат в Браузере
Все рассмотренное выше - это стандарт ES5.
В стандарте ES6 появились классы. Классы удобнее использовать: рассмотренный на этой странице/подобный функционал создается при помощи классов.
