Если вы начнете изучать React, а также если вы углубитесь в JavaScript, вы увидите много вещей, называемых классами, и это часть языка программирования, которую вам обязательно нужно изучить. Классы — это чертежи для объектов JavaScript. Это означает, что вы можете создать один класс, а затем использовать его повторно. Разработчики, работающие с другими языками программирования (такими как Java или Python), сразу узнают классы. Для разработчиков, использующих только JavaScript, эти классы могут показаться немного странными. Мне также потребовалось некоторое время, чтобы на самом деле обернуть вокруг них голову.

# Определение классов

В официальной документации MDN мы можем прочитать следующее об определении классов:

Классы на самом деле являются «специальными функциями», и точно так же, как вы можете определять выражения функций и объявления функций, синтаксис класса состоит из двух компонентов: выражения класса и объявления класса.

Давайте сначала посмотрим на объявления классов. Мы можем определить класс под названием «круг» следующим образом:

class Circle { constructor(x, y, r) { this.x = x; this.y = y; this.r = r; } }

Это пример класса для создания кругов SVG. Этим кругам нужны координаты x и y, а также радиус (r).

Здесь важно отметить, что классы не поднимаются. Это означает, что вы не можете получить доступ к своему классу, пока вы его не объявите. Вы можете сделать это с помощью обычных объявлений функций. Это означает, что вы не можете делать следующее:

// so you can't do this const c = new Circle(); // Oops, error message class Circle {}

Но это должно работать:

class Circle {} const c = new Circle(); // yep, no error message

Функции в классах называются «методами». Вы создаете их так же, как обычные функции, но они называются по-другому. Если мы посмотрим на первый блок кода в этом сообщении блога, мы увидим функцию конструктора. Эта функция является особым типом функции. Он используется для создания и инициализации объекта. В вашем классе может быть только одна из этих функций-конструкторов. Здесь вы затем назначаете (или связываете) значения, которые вы передаете в класс. Бит между фигурными скобками после объявления класса называется телом класса. Здесь мы видим эту функцию-конструктор, но здесь вы также можете создавать другие методы.

// a class called circle, with 1 method called showMessage class Circle { constructor(x, y, r) { this.x = x; this.y = y; this.r = r; } showMessage() { return `Your circle has a radius of ${this.r}`; } } const c = new Circle(100, 200, 400); console.log(c.showMessage());

Основная причина, по которой разработчики JavaScript используют классы, заключается в том, что они упрощают воспроизведение логики. Представьте, что вы создаете класс под названием «автомобиль». Этот класс автомобиля может принимать несколько значений, таких как цвет автомобиля, марка и максимальная скорость. Затем вам нужно связать эти значения в функции-конструкторе. Кроме того, вы можете добавить методы к этому классу автомобиля. Хорошим примером может служить метод drive() илиrake(). Затем их можно вызвать (что означает, что вы выполняете методы), и это заставляет вашу машину либо начать движение, либо затормозить. Преимущество этих методов в том, что они, как я упоминал ранее, воспроизводимы. Если у вас есть пять разных автомобилей, вам не нужно создавать отдельные функции движения и торможения для каждого автомобиля. Давайте посмотрим, как это выглядит в блоке кода:

// class car being created class Car { constructor(colour, brand, topSpeed) { this.colour = colour; this.brand = brand; this.topSpeed = topSpeed; } drive() { return `Your ${this.brand} is driving.. vroooemmm vroemmmm`; } brake() { return `Your ${this.brand} is braking.. iiiieeeee`; } } // use the class const bmw = new Car("red", "bwm", 220);

# Супер (мужчина)?

Когда я начинал изучать классы, я часто сталкивался с таким понятием, как «супер». Вначале я не был слишком уверен, что он делает и почему разработчики его используют. Теперь я знаю и понимаю, что Super используется для наследования. Что для меня звучит как причудливое слово для дублирования класса (то есть создания нового класса), а затем вы можете добавлять новые значения и методы. Это означает, что вы «наследуете» старый класс. Давайте посмотрим на пример.

// create a basic class with drive method class Car { constructor(colour, brand) { this.colour = colour; this.brand = brand; } drive() { return `Your ${this.brand} is driving.. vroooemmm vroemmmm`; } } // extend the class class NewCar extends Car { constructor(speed, topSpeed) { super(colour, brand); this.colour = colour; this.brand = brand; this.speed = speed; this.topSpeed = topSpeed; } maxSpeed() { if (this.speed < this.topSpeed && this.speed > 0) { return `Your ${this.brand} is driving slower than its max`; } else { return `You're going fast..`; } } }

Внутри класса (например, newCar) вы можете получить доступ к родительскому классу (в данном случае к классу Car) с помощью super(). Затем у вас есть доступ к свойствам родительского класса — эти свойства являются методом привода, а также значениями.

Первоначально опубликовано на andredevries.dev.