Новейшие классы JavaScript

От автора: в этой статье мы рассмотрим новейшие классы JavaScript. Классы JavaScript — это особый тип функций. Однако они похожи на типичные функции в том, что классы JavaScript декларируются с ключевым словом и инициализируются синтаксисом выражения.

В JavaScript изначально не было классов. Классы были добавлены с введением ECMASCRIPT 6 (es6), новой и улучшенной версии JavaScript (ECMASCRIPT 5 — более старая версия).

Типичный класс JavaScript — это объект с методом конструктора по умолчанию. Классы JavaScript построены на прототипах, но с синтаксисом выражения.

До того, как классы появились, прототипы использовались для имитации классов в JavaScript. Прототип — это объект по умолчанию, прикрепленный к каждой функции и объекту JavaScript. К прототипу могут быть прикреплены дополнительные свойства, что помогает нам имитировать классы JavaScript.

Чтобы лучше понять это, давайте объявим функцию с именем car с двумя параметрами: age и name.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Дополнительное свойство можно добавить с помощью прототипов, как вы увидите в блоке ниже:

Затем давайте создадим новый экземпляр автомобиля:

Теперь мы собираемся записать недавно добавленное свойство в консоль:

Функциональная машина JavaScript в этом случае служит классом с тремя свойствами: именем, возрастом и цветом. Другими словами, JavaScript использует наследование, которое поставляется с помощью прототипов для имитации классов.

ES6 классы

С введением классов в JavaScript ES6 предоставил нам гораздо более лаконичный способ объявления классов с использованием синтаксиса, аналогичного синтаксису других объектно-ориентированных языков программирования. В отличие от подхода ES5 к классам, ES6 не нуждается в ключевом слове function при работе с классами, хотя и скрытно. JavaScript по-прежнему считает классы особым типом функций.

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

Ключевое слово class

JavaScript предоставляет нам ключевое слово class, которое является основным способом определения классов. Оно служит синтаксическим сахаром к уже существующему шаблону наследования прототипов.

Как показано выше, ключевое слово class используется для указания того, что определяется класс JavaScript. При определении класса можно следовать подходу, отличному от описанного выше, с использованием выражений класса для большей гибкости. Таким образом, класс может быть именованным или безымянным.

Вот пример именованного выражения класса JavaScript:

Метод конструктора

Метод конструктора — это специальный метод в JavaScript, используемый для инициализации объектов класса. Он вызывается автоматически в JavaScript после запуска класса. В любом классе JavaScript может быть только один метод конструктора.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Если не определено, JavaScript добавляет к рассматриваемому классу пустой конструктор с нулевым параметром. Вот пример класса с методом конструктора:

Приведенный выше класс содержит конструктор с двумя параметрами: имя и возраст.

Статический метод

Статический метод — это метод, который вызывается в самом классе, а не в экземпляре класса. Статический метод не является экземпляром класса, но он связан с ним с точки зрения функциональности. Вот типичный пример статического метода:

Затем вышеупомянутый статический метод можно прописать так:

Обратите внимание, что статический метод add показывает нам, что означает добавление.

Синтаксис класса ES6

Типичный класс JavaScript имеет синтаксис, показанный ниже:

Проблемы с классами ES6

Классы могут предоставить более сложное решение для более простого способа выполнения определенных операций в JavaScript. Люди, имеющие опыт работы с объектно-ориентированным языком программирования, могут решить выполнять простые операции с помощью классов, даже если они не нужны.

Некоторые разработчики могут возразить, что добавление классов лишило JavaScript оригинальности и что использование прототипов было более гибким способом выполнения операций, требующих классов. Это связано с тем, что в отличие от классов в других объектно-ориентированных языках программирования, JavaScript не предоставляет базовых функций класса, таких как объявление частных переменных. ECMASCRIPT 2020 направлен на решение некоторых из этих проблем.

Дополнения к классам ECMASCRIPT 2020

Каждый год в JavaScript вносятся дополнения и изменения для более удобного использования JavaScript. Последние изменения находятся в ECMASCRIPT 2020. Некоторые из дополнений к классам на 2020 год включают частные переменные класса и статические поля.

Закрытая переменная класса: при работе с большой кодовой базой с большим количеством объявлений переменных может возникнуть необходимость в переменной, доступ к которой можно получить только внутри класса. Закрытая переменная класса решает эту проблему. Добавив хэш перед именем переменной, можно легко создать закрытую переменную.

Вышеупомянутая переменная ‘#name’ доступна только в классе ‘Detail’.

Статические поля. Чтобы понять, что такое статические поля, рассмотрим приведенный ниже фрагмент кода:

В более старой версии JavaScript попытка получить доступ к методу welcome без создания нового экземпляра класса кажется невозможной. Но с последним дополнением мы можем получить доступ к этим методам без необходимости создания экземпляра.

Доступ к вышеуказанному методу можно получить так:

Заключение

Классы JavaScript решают некоторые проблемы, связанные с использованием прототипов. Они делают объявление класса более прямым и понятным. Новейший ECMASCRIPT 2020 делает использование классов еще проще, добавляя больше гибкости.

Автор: Amarachi Amaechi

Источник: blog.logrocket.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.