Ресурсы: Документация по классам Статья по классам
Если по-простому,
классы - это красивая обёртка функций-конструкторов,
синтаксический сахар.
Создание класса начинается с ключевого слова
class, далее название класса с большой буквы и фигурные скобки
Далее нам нужно его конструировать, то есть прописать какие вещи будет включать этот шаблон, что будет уметь этот класс, что в нём будет задано изначально.
При этом самым важным параметром будут те аргументы, что будут передаваться извне.
Чтобы начать конструировать наш класс, используется свойство
constructor Код
class Rectangle {
constructor() {
}
}
В его круглые скобки мы будем записывать те аргументы, которые впоследствии в него будут приходить, например, для нашего прямоугольника это будут высота и ширина
Код
class Rectangle {
constructor(height, width) {
}
}
Теперь с помощью данного класса мы можем создать множество его
экземпляров, множество различных прямоугольников.
Аргументы мы должны передать в свойства этого нового объекта
Код
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
Создадим для нашего класса метод
calcArea, который будет возвращать площадь прямоугольника со сторонами
height и
width:
Код
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
calcArea() {
return this.height * this.width;
}
}
Теперь мы можем использовать наш класс:
Код
const square = new Rectangle(10, 10);
Сейчас в переменной
square лежит объект, у которого есть два свойства (
height и
width) и один метод.
Пробуем использовать метод этого вновь созданного объекта:
Код
console.log(square.calcArea()); // 100
- отделение концепции от её экземпляра. В данном случае концепция это наш класс, шаблон, по которому мы создаём его экземпляры, и собственно экземпляры, созданные на основе концепции:
Код
const square = new Rectangle(10, 10);
const square = new Rectangle(20, 30);
const square = new Rectangle(5, 15);
способность нашего объекта или класса базироваться на другом объекте или классе.
Разберём на примере и для начала создадим ещё один класс, который позволит нам создавать уже цветные прямоугольники с каким-то текстом внутри:
Код
class ColoredRectangleWithText {
}
Логично подумать, что у этого класса также будут свойства ширины и высоты, но вместо того, чтобы дублировать код, мы можем использовать наследуемость.
Класс
ColoredRectangleWithText будет наследоваться от класса
Rectangle, он будет брать у него те свойства и методы, которые в нём прописаны.
Для того, чтобы указать наследование, используется ключевое слово
extends Код
class ColoredRectangleWithText extends Rectangle {
}
Ну и дальше также начинаем конструировать наш класс, прописывая необходимые аргументы
Код
class ColoredRectangleWithText extends Rectangle {
constructor(height, width, text, bgColor) {
}
}
По аналогии нам теперь в новый экземпляр объекта необходимо записать свойства, то есть по сути нужно продублировать эти строки, как это было в классе
Rectangle Код
this.height = height;
this.width = width;
Чтобы этого не делать (ведь этих свойств может быть очень много), мы можем просто использовать метод
super(), который вызывает суперконструктор родителя, за счет этого строки выше нам повторять не нужно, они автоматически перейдут в конструктор этого класса
Код
class ColoredRectangleWithText extends Rectangle {
constructor(height, width, text, bgColor) {
super(height, width); // в конструкторе всегда пишем на первом месте
}
}
Мы указали в круглых скобках для
super аргументы
height и
width, поскольку иногда свойств в родительском классе много и нам не всегда нужны они все для использования в классе, который наследуется.
После этого мы добавляем в наш новый экземпляр объекта свойства
text и
bgColor Код
class ColoredRectangleWithText extends Rectangle {
constructor(height, width, text, bgColor) {
super(height, width); // в конструкторе всегда пишем на первом месте
this.text = text;
this.bgColor = bgColor;
}
}
Само собой, метод
calcArea в классе
ColoredRectangleWithText тоже можно будет применять, он также наследуется от класса
Rectangle.
Помимо него, создадим свой собственный метод
showMyProps для этого класса:
Код
class ColoredRectangleWithText extends Rectangle {
constructor(height, width, text, bgColor) {
super(height, width); // в конструкторе всегда пишем на первом месте
this.text = text;
this.bgColor = bgColor;
}
showMyProps() {
console.log(`Текст: ${this.text}, цвет: ${this.bgColor}`);
}
}
Класс готов, давайте протестируем:
Код
const div = new ColoredRectangleWithText(25, 20, 'Hello World', 'red');
В переменной
div у нас лежит вновь созданный объект со всеми свойствами, указанными в созданном классе.
Протестируем методы этого объекта:
Код
div.showMyProps(); // тестируем собственный метод класса ColoredRectangleWithText
console.log(div.calcArea()); // тестируем унаследованный от класса Rectangle метод
И мы видим в консоли, что оба метода отработали:
Цитата
Текст: Hello World, цвет: red
500
Добавлять комментарии могут только зарегистрированные пользователи.
