«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Далее на странице...



По классификации типов данных в 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) функции берется из параметра 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 появились классы. Классы удобнее использовать: рассмотренный на этой странице/подобный функционал создается при помощи классов.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Функции-конструкторы - Прототип объекта. Свойство prototype
7243
Методы объекта ClassList - Работа с классами - Свойство length
7243
Делегирование событий - Отслеживание событий на множестве элементов
7245
Пример создания табов в JavaScript - Работа с проектом
7248
Методы setTimeout, setInterval и clearInterval – Синтаксис
7243
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
7244
Таймер обратного отсчета – Остаток времени до полуночи
7243
Cвойства clientWidth и clientHeight - Размеры элементов DOM
7243
Вызов и закрытие модального окна - Триггеры и data-атрибуты
7253
Открытие модального окна через промежуток времени и в конце страницы
7243
Контекст вызова функции this - Методы call, apply и bind
7243
Контекст вызова в обработчиках событий – this в стрелочной функции
7243
Объявление и наследование классов - Свойство constructor
7243

Тематические публикации
Популярные заметки
Последние заметки