Далее на странице...
Здесь будут рассмотрены классы, которые появились в стандарте 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() - работа с методом родительского класса.
