От автора: в этой статье мы рассмотрим новейшие классы JavaScript. Классы JavaScript — это особый тип функций. Однако они похожи на типичные функции в том, что классы JavaScript декларируются с ключевым словом и инициализируются синтаксисом выражения.
В JavaScript изначально не было классов. Классы были добавлены с введением ECMASCRIPT 6 (es6), новой и улучшенной версии JavaScript (ECMASCRIPT 5 — более старая версия).
Типичный класс JavaScript — это объект с методом конструктора по умолчанию. Классы JavaScript построены на прототипах, но с синтаксисом выражения.
До того, как классы появились, прототипы использовались для имитации классов в JavaScript. Прототип — это объект по умолчанию, прикрепленный к каждой функции и объекту JavaScript. К прототипу могут быть прикреплены дополнительные свойства, что помогает нам имитировать классы JavaScript.
Чтобы лучше понять это, давайте объявим функцию с именем car с двумя параметрами: age и name.
function Car(){ this.name = 'dragon'; this.age = 3;
}Дополнительное свойство можно добавить с помощью прототипов, как вы увидите в блоке ниже:
Car.prototype.color = 'white'
Затем давайте создадим новый экземпляр автомобиля:
let Car1 = new Car()
Теперь мы собираемся записать недавно добавленное свойство в консоль:
console.log(Car1.color)
Функциональная машина JavaScript в этом случае служит классом с тремя свойствами: именем, возрастом и цветом. Другими словами, JavaScript использует наследование, которое поставляется с помощью прототипов для имитации классов.
ES6 классы
С введением классов в JavaScript ES6 предоставил нам гораздо более лаконичный способ объявления классов с использованием синтаксиса, аналогичного синтаксису других объектно-ориентированных языков программирования. В отличие от подхода ES5 к классам, ES6 не нуждается в ключевом слове function при работе с классами, хотя и скрытно. JavaScript по-прежнему считает классы особым типом функций.
Возможно, основное различие между классом и функцией заключается в подъеме: в отличие от функций, классы JavaScript должны быть объявлены перед доступом. В противном случае выдается ошибка.
Ключевое слово class
JavaScript предоставляет нам ключевое слово class, которое является основным способом определения классов. Оно служит синтаксическим сахаром к уже существующему шаблону наследования прототипов.
//javascript class declaration
class Car { //methods
}Как показано выше, ключевое слово class используется для указания того, что определяется класс JavaScript. При определении класса можно следовать подходу, отличному от описанного выше, с использованием выражений класса для большей гибкости. Таким образом, класс может быть именованным или безымянным.
//unnamed javascript class expression
let Car = class { constructor(name, age){ this.name = name this.age = age }
}Вот пример именованного выражения класса JavaScript:
//named javascript class expression
let Car = class Car { constructor(name, age){ this.name = name this.age = age }
}Метод конструктора
Метод конструктора — это специальный метод в JavaScript, используемый для инициализации объектов класса. Он вызывается автоматически в JavaScript после запуска класса. В любом классе JavaScript может быть только один метод конструктора.
Если не определено, JavaScript добавляет к рассматриваемому классу пустой конструктор с нулевым параметром. Вот пример класса с методом конструктора:
//javascript class with a constructor class Car { constructor(name, age){ this.name = name this.age = age }
}Приведенный выше класс содержит конструктор с двумя параметрами: имя и возраст.
Статический метод
Статический метод — это метод, который вызывается в самом классе, а не в экземпляре класса. Статический метод не является экземпляром класса, но он связан с ним с точки зрения функциональности. Вот типичный пример статического метода:
class Math { static add(number1 , number2){ return number1 + number2 }
}Затем вышеупомянутый статический метод можно прописать так:
let additionResult = Math.add(2,3)
Обратите внимание, что статический метод add показывает нам, что означает добавление.
Синтаксис класса ES6
Типичный класс JavaScript имеет синтаксис, показанный ниже:
class Car { constructor(){ //default operation } method(){ //operation2 } }Проблемы с классами ES6
Классы могут предоставить более сложное решение для более простого способа выполнения определенных операций в JavaScript. Люди, имеющие опыт работы с объектно-ориентированным языком программирования, могут решить выполнять простые операции с помощью классов, даже если они не нужны.
Некоторые разработчики могут возразить, что добавление классов лишило JavaScript оригинальности и что использование прототипов было более гибким способом выполнения операций, требующих классов. Это связано с тем, что в отличие от классов в других объектно-ориентированных языках программирования, JavaScript не предоставляет базовых функций класса, таких как объявление частных переменных. ECMASCRIPT 2020 направлен на решение некоторых из этих проблем.
Дополнения к классам ECMASCRIPT 2020
Каждый год в JavaScript вносятся дополнения и изменения для более удобного использования JavaScript. Последние изменения находятся в ECMASCRIPT 2020. Некоторые из дополнений к классам на 2020 год включают частные переменные класса и статические поля.
Закрытая переменная класса: при работе с большой кодовой базой с большим количеством объявлений переменных может возникнуть необходимость в переменной, доступ к которой можно получить только внутри класса. Закрытая переменная класса решает эту проблему. Добавив хэш перед именем переменной, можно легко создать закрытую переменную.
class Detail { #name = "steve" welcome(){ console.log(this.#message) } } const detail_1 = new Detail() detail_1.welcome()Вышеупомянутая переменная ‘#name’ доступна только в классе ‘Detail’.
Статические поля. Чтобы понять, что такое статические поля, рассмотрим приведенный ниже фрагмент кода:
class Detail { #name = "steven" welcome(){ console.log(this.#message) } }В более старой версии JavaScript попытка получить доступ к методу welcome без создания нового экземпляра класса кажется невозможной. Но с последним дополнением мы можем получить доступ к этим методам без необходимости создания экземпляра.
Доступ к вышеуказанному методу можно получить так:
Заключение
Классы JavaScript решают некоторые проблемы, связанные с использованием прототипов. Они делают объявление класса более прямым и понятным. Новейший ECMASCRIPT 2020 делает использование классов еще проще, добавляя больше гибкости.
Автор: Amarachi Amaechi
Источник: blog.logrocket.com
Редакция: Команда webformyself.