Главная » Классы (ES6)

Классы (ES6)


13.06.2021, 22:30
Появились в ES6 (ECMAScript 2015)

Классы - это "синтаксический сахар", красивая обёртка функций-конструкторов.

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

Код

class ИмяКласса {

}

Например:

Код

class Rectangle {
  constructor() {

  }
}

В функцию-конструктор передаются аргументы при создании экземпляра класса.

Классы служат для создания новых объектов, поэтому аргументы необходимо записать в свойства этого нового объекта.

Код

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

Добавим нашему классу какой-нибудь метод:

Код

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

Класс готов и теперь его можно использовать:

Код

const square = new Rectangle(10, 5);
console.log(square.calcArea()); // => 50

Ещё один прямоугольник:

Код

const long = new Rectangle(100, 20);
console.log(square.calcArea()); // => 2000

Примем класс Rectangle как базовый и создадим дополнительно ещё один класс:

Код

class ColoredRectangleWithText {

}

У него нам нужны такие же свойства, как и у класса Rectangle (ширина и высота), поэтому чтобы их не прописывать ещё раз, сделаем их наследование, но кроме этого добавим еще новые свойства text и bgColor

Наследование делается с помощью ключевого слова extends (наследуется от), при этом наследуются те свойства, которые мы выбираем, а методы наследуются автоматически

Код

class ColoredRectangleWithText extends Rectangle {
  constructor(height, width, text, bgColor) {

  }
}

Чтобы для унаследованных свойств внутри конструктора опять не прописывать this.height и т. д., используем метод super().

Метод super() в конструкторе размещаем всегда на первом месте

Код

class ColoredRectangleWithText extends Rectangle {
  constructor(height, width, text, bgColor) {
  super(height, width);
  this.text = text;
  this.bgColor = bgColor;
  }
}

Добавим в этот класс ещё какой-нибудь метод:

Код

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, 10, 'Hello World', 'red');

Мы можем использовать как унаследованные методы и свойства, так и те, что добавили в этот класс дополнительно:

Код

div.showMyProps(); // => вызываем метод из класса, добавленный дополнительно

В консоли получаем:

Текст: Hello World, цвет: red

А теперь используем метод calcArea(), который наследуется от базового класса Rectangle

Код

console.log(div.calcArea()); // => 250

КОММЕНТАРИИ (0)