Классы в JS

В этой статье вы познакомитесь с классами в JavaScript.

Класс — это «чертеж» объекта. Это расширяемый шаблон кода для создания объектов, который устанавливает в них начальные значения (свойства) и реализацию поведения (методы). Это одна из функций, появившихся в версии ES6 JavaScript.

Часто приводят такой пример: представьте, что класс — это чертеж дома, то есть его прототип. В чертеже содержится все подробности об этажах, дверях, окнах и т.д. На основе этих описаний вы строите дом. Дом в этом примере — объект.

По одному и тому же чертежу можно построить много похожих домов. Аналогично и с классами: они позволяют создавать множество похожих объектов.

Создание класса

Создание класса в JavaScript похоже на использование конструктора объекта — это просто синтаксический сахар.

Напомним, как используется конструктор объект:

// конструктор
function Person () {
    this.name = 'Андрей',
    this.age = 23
}

// создание объекта
const person1 = new Person();

Класс создается так же — только нужно использовать ключевое слово class вместо function.

// создание класса
class Person {
  constructor(name) {
    this.name = name;
  }
}

Ключевое слово class используется для создания класса. Свойства назначаются в функции конструктора.

После создания класса можно создавать его дочерние объекты.

// создаем класс
class Person {
  constructor(name) {
    this.name = name;
  }
}

// создаем объекты
const person1 = new Person('Андрей');
const person2 = new Person('Даня');

console.log(person1.name); // Вывод: Андрей
console.log(person2.name); // Вывод: Даня

В этом примере person1 и person2 — объекты класса Person.

Примечание. Метод constructor() внутри класса вызывается автоматически каждый раз, когда создается объект.

Методы класса

При использовании функции конструктора методы определяются так:

// конструктор
function Person (name) {

   // присваиваем параметрам значение для вызова объекта
    this.name = name;

    // определяем метод
    this.greet = function () {
        return ('Привет,' + ' ' + this.name);
    }
}

Определять методы в классе очень просто. Вы просто указываете имя метода и круглые скобки после него (). Например, так:

class Person {
    constructor(name) {
    this.name = name;
  }

    // определяем метод
    greet() {
        console.log(`Привет, ${this.name}`);
    }
}

let person1 = new Person('Андрей');

// получаем значение свойства
console.log(person1.name); // Вывод: Андрей

// вызываем метод
person1.greet(); // Вывод: Привет, Андрей

Примечание. Чтобы вызвать методу объекта, необходимо вызвать метод, используя его имя и круглые скобки после него ().

Геттеры и сеттеры в классах

Напомним: геттеры позволяют получать значения для объекта, а сеттеры позволяются устанавливать значения для объекта.

Классы в JavaScript могут включать геттеры и сеттеры. Для этого нужно использовать ключевые слова get и set для геттеров сеттеров соответственно. Например:

class Person {
    constructor(name) {
        this.name = name;
    }

    // геттер
    get personName() {
        return this.name;
    }

    // сеттер
    set personName(x) {
        this.name = x;
    }
}

let person1 = new Person('Андрей');
console.log(person1.name); // Вывод: Андрей

// изменяем значение свойства name
person1.personName = 'Маша';
console.log(person1.name); // Вывод: Маша

Поднятие (hoisting) классов не работает

Класс обязательно нужно определить до использования. В отличие от функций, класс не «поднимается» — hoisting не работает.

Если попытаться использовать класс до его объявления, JavaScript сообщит об ошибке:

// пытаемся использовать класс
const p = new Person(); // ошибка ReferenceError

// определяем класс
class Person {
  constructor(name) {
    this.name = name;
  }
}

Классы — в строгом режиме

Классы всегда следуют принципу "use-strict". Весь код внутри класса автоматически переводится в строгий режим. Например:

class Person {
  constructor() {
    a = 0;
    this.name = a;
  }
}

let p = new Person(); // ReferenceError: Can't find variable: a

Примечание. На самом деле класс в JavaScript — это особый тип функции. Поэтому оператор typeof вернет значение function для класса.

class Person {}
console.log(typeof Person); // Вывод: function