«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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



Здесь будут рассмотрены классы, которые появились в стандарте ES6.

Что такое стандарт ES6?

Стандарт ES6 выпущен в 2015 году и облегчает работу с JavaScript. В основном поддерживается всеми браузерами.

Что такое классы? Классы - красивая "обертка" функций конструкторов. По сути, классы - все те же функции.

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

Для чего нужны классы? Дело в том, что на сайтах, в веб-приложениях постоянно используется шаблонизация. Шаблон создается один раз и "говорит" о том, что это за компонент, что он делает.

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



Объявление и синтаксис классов

Синтаксис классов похож на синтаксис функций конструкторов.

Класс объявляется с помощью ключевого слова class.

Имя класса всегда начинается с большой буквы.

JavaScript-код

class Rectangle {
	
}

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

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

Свойство constructor

Чтобы сконструировать класс, используется свойство constructor.

Рассмотрим класс, который создает прямоугольники (классы, как и функции-конструкторы, служат для создания новых объектов).

JavaScript-код

class Rectangle {
	constructor(width, height) {
		this.height = height;
		this.width = width;
	}

	calcArea() {
		return this.height * this.width;
	}
}

1. В круглых скобках указываются параметры (в данном случае ширина и высота), которые при создании класса (его экземпляра) будут приходить из вне.

2. В фигурных скобках через this (см. прошлые статьи) мы обращаемся к экземпляру нового созданного объекта.

this.height = height - через this в каждый новый объект записывается свойство height (значение height приходит из аргумента height).

3. Метод calcArea() считает площадь прямоугольника.

return this.height * this.width;

Контекст вызова this ссылается на новый (создаваемый) объект (прямоугольник).

С помощью этого класса можно сконструировать множество прямоугольников.

Создание новых объектов

JavaScript-код

'use strict';

class Rectangle {
	constructor(width, height) {
		this.height = height;
		this.width = width;
	}

	calcArea() {
		return this.height * this.width;
	}
}

const square = new Rectangle(10, 10);

Результат в Браузере

В переменную square помещается новый объект, создаваемый при помощи класса.

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

JavaScript-код

'use strict';

class Rectangle {
	constructor(width, height) {
		this.height = height;
		this.width = width;
	}

	calcArea() {
		return this.height * this.width;
	}
}

const square = new Rectangle(10, 10);
const long = new Rectangle(20, 100);

console.log(square.calcArea());
console.log(long.calcArea());

Результат в Браузере

На данном пример видно, как с помощью класса можно создавать множество разных объектов (в данном случае квадратов), которые имеют одни и те же методы и свойства. Но могут принимать разные аргументы.

Классы использовать удобнее, чем функции-конструкторы.

Принципы ООП

1. Абстракция

Это когда концепция (класс/шаблон) отделяется от экземпляра. Экземпляры объекта создаются на основе шаблона/класса.

2. Наследование

Способность одного объекта или класса базироваться на основе другого объекта или класса. Это главный механизм повторного использования какого-либо кода. При этом наследственное отношение классов четко определяет их иерархию.

Пример того, в каких случаях используется наследование.

Допустим, есть большой класс title - однотипные статьи для размещения на сайте.

Допустим сайт разрастается и требуются статьи для различных рубрик.

Главный класс title содержит то, что характерно абсолютно для всех статей.

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

Наследование классов

При этом ясно, что у этого/второго класс будут такие же атрибуты: ширина и высота (т.к. это прямоугольник).

И чтобы снова их не прописывать (this.height = height; this.width = width;) предлагается сделать наследование классов.

Класс ColorRectangleWithText будет наследоваться у класса Rectangle, то есть ColorRectangleWithText будет брать у Rectangle его свойства и методы.

Для наследования классов используется ключевое слово extends.

JavaScript-код

'use strict';

class Rectangle {
	constructor(width, height) {
		this.height = height;
		this.width = width;
	}

	calcArea() {
		return this.height * this.width;
	}
}

// Наследование ColorRectangleWithText у класса Rectangle
class ColorRectangleWithText extends Rectangle {
	constructor(width, height, text, bgColor) {
		super(height, width);
		this.text = text;
		this.bgColor = bgColor;
	}

	showMyProps() {
		console.log(`Текст: ${this.text}, цвет: ${this.bgColor}`);
	}
}

const div = new ColorRectangleWithText(25, 30, 'Hi', 'red');

div.showMyProps();
console.log(div.calcArea());

Результат в Браузере

Результат в консоли

Текст: Hi, цвет: red
750

1. class ColorRectangleWithText extends Rectangle - наследование класса.

2. constructor(width, height, text, bgColor) - указываются параметры: их больше, чем у родителя (те, что есть у родительского класса, также указываются).

3. super(height, width) - super() вызывает родительские свойства (свойства height, width класса Rectangle).

Эта запись нужна, чтобы снова не прописывать this.height = height; this.width = width;

В super() не обязательно указывать все свойства родительского класса (не всегда нужны все свойства).

super() всегда располагается на первом месте в constructor(){}.

4. this.text = text; this.bgColor = bgColor; - через this в каждый новый объект записываются свойства text и bgColor.

5. Нужно понимать, что кроме свойств height и width, классом ColorRectangleWithText у родителя наследуется также метод calcArea().

6. showMyProps() - метод класса ColorRectangleWithText.

7. В переменную div помещается конструктор new ColorRectangleWithText(25, 30, 'Hi', 'red').

Теперь при каждой подобной записи создается новый объект, который содержит свои свойства и методы, и свойства и методы родителя: в нашем случае - всё необходимое для создания цветных прямоугольников с текстом.

8. div.showMyProps() - работа с собственным методом объекта.

div.calcArea() - работа с методом родительского класса.

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 5
Объявление и наследование классов - Свойство constructor
201
Методы объекта ClassList - Работа с классами - Свойство length
943
Делегирование событий - Отслеживание событий на множестве элементов
3066
Пример создания табов в JavaScript - Работа с проектом
1058
Методы setTimeout, setInterval и clearInterval – Синтаксис
770
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
642
Таймер обратного отсчета – Остаток времени до полуночи
1392
Cвойства clientWidth и clientHeight - Размеры элементов DOM
628
Вызов и закрытие модального окна - Триггеры и data-атрибуты
4743
Открытие модального окна через промежуток времени и в конце страницы
595
Функции-конструкторы - Прототип объекта. Свойство prototype
271
Контекст вызова функции this - Методы call, apply и bind
337
Контекст вызова в обработчиках событий – this в стрелочной функции
337
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки