Объектно-ориентированное программирование Классы ES6.

Что такое классы в JavaScript?

Классы JS — это шаблоны для создания объектов. Они сокращают дублирование кода и время отладки. Разработчики используют классы для создания подобных объектов. Подобно функциям, классы могут использоваться как в объявлении, так и в выражении.

Объявление класса

Чтобы объявить класс, мы используем ключевое слово class с именем класса в нотации Паскаля и метод constructor().

Пример:

class Quadrilateral {
    constructor(side1, side2, side3, side4) { 
        this.side1 = side1;
        this.side2 = side2;
        this.side3 = side3;
        this.side4 = side4;
    }
getPerimeter() {
        return this.side1 + this.side2 + this.side3 + this.side4;
    }
}
// getPerimeter() is a regular method, do not confuse with the getter syntax.
  • JavaScript вызывает метод constructor() каждый раз, когда создает новый экземпляр класса.
  • Метод constructor() отделяет классы от синтаксиса объектов.
  • В методе constructor() мы используем ключевое слово `this` для установки значения экземпляра четырехугольника.
  • Любое количество методов может использоваться внутри объявления класса. Конструктор особенный, потому что он предоставляет фактическую функцию конструктора, которая будет привязана к имени Quadrilateral.

В приведенном выше примере:

  • Quadrilateral — это имя нашего класса.
  • Метод constructor() принимает четыре аргумента, поскольку четырехугольник имеет четыре стороны.
  • Ключевое слово this внутри метода constructor() относится к экземпляру этого класса.

Выражения классов

Выражения класса могут быть именованными или безымянными. Имя, данное выражению класса, является локальным по отношению к телу класса.

Пример:

let Quadrilateral = class {
constructor(side1, side2, side3, side4){ 
this.side1 = side1;
this.side2 = side2;
this.side3 = side3;
this.side4 = side4;
   }
}
// named
console.log(Quadrilateral.name);
// output: “Quadrilateral”

Методы установки и получения

Метод класса и синтаксис получателя такие же, как и для объектов, за исключением того факта, что они не включают запятые между методами. Мы используем ключевые слова get и set для определения геттеров и сеттеров JavaScript для класса.

Пример:

class Quadrilateral {
constructor(side1, side2, side3, side4) {
this.side1 = side1;
this.side2 = side2;
this.side3 = side3;
this.side4 = side4;
  }
//setters
set side1(side1){ //must have a formal parameter.
return this.side1 = side1;
  }
// getters
get side1() {
return this.side1 = side1;
  }
}
  • Ключевое слово set связывает свойство объекта с методом, который будет вызываться при назначении этого свойства.
  • Ключевое слово get связывает свойство объекта с методом, который будет вызываться при поиске этого свойства.

Экземпляр

Экземпляр — это объект, содержащий имена свойств и методы класса, но со своими уникальными значениями свойств.

Пример:

const quad1 = new Quadrilateral(3,3,2,2)
  • Мы используем ключевое слово `new`, чтобы создать новый экземпляр класса Quadrilateral.
  • Ключевое слово `new` вызывает метод constructor(), запускает код внутри него и возвращает новый экземпляр.

Наследование

Наследование — это когда мы создаем родительский класс со свойствами и методами, которые могут распространяться на дочерний класс (подкласс).

Пример:

class Rectangle extends Quadrilateral {
constructor(side1, side2) {
super(side1, side2, side1, side2)
  }
}

Ключевое слово`Extends`

Ключевое слово extends используется для создания класса как потомка другого класса (подкласса).

  • При использовании extends в объявлении класса все родительские методы доступны дочернему классу.

Метод `super`

  • Super вызывает родительский класс, также известный как конструктор суперкласса, и передает его дочернему классу.
  • Вы всегда должны вызывать метод super, прежде чем сможете использовать ключевое слово `this`. Невыполнение этого требования приведет к ошибке ссылки.

Вызов методов родительского класса для подклассов

Rectangle является дочерним элементом Quadrilateral, поэтому имеет доступ к методу getPerimeter() в родительском классе.

Пример:

class Rectangle extends Quadrilateral {
constructor(side1, side2) {
super(side1, side2, side1, side2)
    }
}
const rect1 = new Rectangle(2,4,2,4) // Instance of Rectangle.
rect1.getPerimeter() // Called method from Quadrilateral class.
//output: 12