Классы JavaScript

Что это такое и почему вы должны их использовать.

Что такое классы JS, как их создавать, как их использовать и почему вы должны их использовать.

Классы JavaScript — это способ создать повторно используемый конструктор объектов.

Хотя сами по себе они не являются объектами, они представляют собой альтернативу использованию функций-конструкторов, таких как эта:

function Person(first, last) {
   this.firstName = first;
   this.lastName = last;
 }

Это типичный способ создания многократно используемого конструктора объектов в JavaScript.

Это вернет объект, который выглядит примерно так:

{
    firstName:    first
    lastName:     last
}

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

• Мы можем создать функцию поиска, которая будет искать и возвращать значение, назначенное клавише firstName, а затем вторую, чтобы объединить это в строку и вернуть что-то вроде “Hello first”.
• Мы можем объединить эти две функции в одну, а затем добавить ее как метод к исходной функции-конструктору.
• Мы можем объединить конструктор и метод в 1 блок путем рефакторинга функции конструктора в класс JS.

Мы собираемся выбрать вариант 3. В конце концов, именно об этом эта статья.

Как мы создаем класс JavaScript?

Сначала мы начнем с ключевого слова class и дадим ему имя.

class Person {}

Следующим шагом является создание функции конструктора.

class Person {
    constructor() {}
}

Теперь у нас есть функция-конструктор, принимающая параметры и создающая ключевые слова для сопряжения аргументов.

class Person {
    constructor(first, last) {
        this.firstName = first;
        this.lastName = last;
    }
}

Это выведет объект в той же структуре, что и функция-конструктор, предоставленная ранее.

{
    firstName:    first
    lastName:     last
}

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

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

Этот конструктор также добавляется к прототипу каждого создаваемого объекта.

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

class Person {
    constructor(first, last) {
        this.firstName = first;
        this.lastName = last;
    }
    greet() {
        return `Hello ${this.firstName}`;
    }
}

Мы можем добавить столько методов, сколько захотим. Например, greetLast, который будет приветствовать кого-то, используя его фамилию.

Как мы их используем?

Я дал это 5 абзацев назад. Мы используем ключевое слово new и вызываем только что созданный класс.

const david = new Person('David', 'F');

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

Мы можем видеть функцию конструктора, а также функцию приветствия как часть прототипа этого объекта. Так что же произойдет, если мы вызовем функцию (метод) greet?

Нас встречают!

Мы также можем проверить, является ли класс функцией, а возвращаемый объект — объектом.

Чем они полезны?

(Вывод)

• Так же, как функция-конструктор, они помогают вам сэкономить время, позволяя создавать объекты с одной и той же структурой снова и снова без необходимости вводить все пары ключ-значение для каждой переменной, которую вы хотите создать, используя одну и ту же структуру.
• Проще добавить все необходимые методы в тот же блок, что и блок класса. Вместо variable.prototype.methodName для каждого метода.
• Методы позволяют добавлять функции к каждому объекту, что экономит время, потенциально создавая функцию для всех подобных объектов.
• Упрощает отладку, так как методы находятся в блоке класса. Больше не нужно искать в коде прототипы!
• Наследование может быть полезным и может сэкономить время, если второй класс, который вы создаете, может использовать те же значения, что и предыдущие.

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