Стандарт ES6: классы в JavaScript

Класс и его структура


На сайте Can I use есть такое определение для класса:

Цитата
Классы ES6 являются синтаксическим сахаром, обеспечивающим гораздо более простой и понятный синтаксис для создания объектов и работы с наследованием.

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

Задаётся класс с помощью ключевого слова class и далее имя класса с большой буквы, после чего следуют фигурные скобки, например:

Код

class Rectangle {

}

Внутри мы прописываем свойство constructor, которое будет отвечать за конструирование шаблона класса:

Код

class Rectangle {
  constructor() {

  }
}

Как и для функции, для constructor() в круглых скобках мы можем прописывать те аргументы, которые в дальнейшем можем использовать:

Код

class Rectangle {
  constructor(height, width) {
   
  }
}

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

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

Код

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

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

Внутри класса мы можем также создавать методы, например, зададим метод, который будет рассчитывать и возвращать нам площадь прямоугольника, при этом не указывается ключевое слово function:

Код

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

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

Между свойствами и методами внутри класса не нужно ставить точку с запятой.

Использование созданного класса


Как использовать созданный класс? Создадим переменную square и в неё поместим объект, который создаётся при помощи класса. При этом используется ключевое слово new, название класса, а в круглые скобки задаём входящие аргументы:

Код

const square = new Rectangle(10, 10);

Выведем в консоль результат вычисления площади, обратившись к объекту, сохранённому в переменной square и к его методу calcArea:

Код

console.log(square.calcArea());

В результате в консоли получаем результат 10 * 10 = 100



Аналогично, создадим ещё одну переменную, например, с названием long, и в неё сохраним ещё один экземпляр объекта, только с другими входящими аргументами:

Код

const long = new Rectangle(20, 100);

Результат вычислений также выводим в консоль:

Код

console.log(long.calcArea());

Ну и, естественно, получаем 20 * 100 = 2000

Иерархия классов в JS


Примем созданный нами ранее класс Rectangle за базовый и создадим ещё один класс, дадим ему имя ColoredRectangle

Код

class ColoredRectangle {
   
}

Этот класс нам нужен для того, чтобы создавать прямоугольники ещё и с разной фоновой заливкой. При этом он будет наследовать свойства и методы нашего базового класса Rectangle. Каким образом?

Для этого используется ключевое слово extends и имя того класса, от которого наследуются свойства и методы:

Код

class ColoredRectangle extends Rectangle {

}

Аналогично внутри этого класса прописываем constructor и задаём ему входящие аргументы :

Код

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

Здесь мы, кроме высоты и ширины, задали дополнительно аргументы текста и фонового цвета. Чтобы внутри конструктора не прописывать вручную те свойства, которые мы хотим наследовать от базового класса Rectangle (речь идёт о this.height и this.width), мы просто можем прописать метод super():

Код

class ColoredRectangle extends Rectangle {
  constructor(height, width, text, bgColor) {
  super();
  }
}

В конструкторе метод super() должен быть всегда на первом месте. Внутри круглых скобок указываем те свойства из наследуемых, которые хотим использовать (потому как не всегда все свойства, наследуемые от базового класса, нам нужны), например, height и width:

Код

class ColoredRectangle extends Rectangle {
  constructor(height, width, text, bgColor) {
  super(height, width);
  }
}

Теперь, когда мы заимпортировали свойства и методы базового класса, нам нужно записать в свойства класса ColoredRectangle два оставшихся аргумента text и bgColor:

Код

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

В классе ColoredRectangle метод calcArea() базового класса будет также присутствовать, поскольку методы наследуются тоже.
Но давайте напишем еще и свой метод для класса ColoredRectangle, назовём его showMyProps(), с его помощью мы в консоль выведем сообщение, в котором будут использованы свойства, прописанные в классе:

Код

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

Ну и, как мы это делали выше, создадим какую-то переменную div, в которую помещаем новый экземпляр объекта с какими-то входящими аргументами, высота, ширина, строка с текстом и цвет:

Код

const div = new ColoredRectangle(20, 30, 'мы задали', 'blue');

Выводим результат в консоль, обращаясь к методу showMyProps() объекта, сохранённого в переменной div:

Код

div.showMyProps();

И в консоли получаем результат:

Цитата

Текст: мы задали цвет: blue

Также давайте выведем еще один результат в консоль, на сей раз мы обратимся к импортированному методу calcArea():

Код

console.log(div.calcArea());

В консоли видим результат 600, метод отлично отработал!

Комментарии к материалу: