Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

Объектно-ориентированное программирование с использованием JavaScript

by
Length:MediumLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Final product image
What You'll Be Creating

Вы знакомы с термином «код спагетти»? Это метафора, которую вы могли бы услышать от разработчиков, не являющихся разработчиками JavaScript, в критике языка. Это код без структуры. Он будет состоять из кучи утверждений. Некоторые из них могут быть обернуты функциями, а некоторые - и вовсе нет. И если вам повезет, все 9000 строк кода будут в одном файле. Эта структура «спагетти», вероятно, является результатом процедурного программирования.

В процедурном программировании функции используются для выполнения задач. Нам нужны функции, но нам также нужен дизайн, с которым мы можем работать. И хотя спагетти отлично подходит для ужина, это не для кода. Антидот - объектно-ориентированное программирование. Чтобы понять объектно-ориентированное программирование, мы рассмотрим разработку программы, определение классов и создание объектов.

Проектирование программы

Представим себе, что вам назначена задача сделать приложения книжного магазина. Просто ради удовольствия, позвольте нам назвать наш книжный магазин Amazonia. У Амазонии будут книги. Будут обзоры для книг. И мы захотим искать книги по автору. Будет больше возможностей, которые мы хотим реализовать в нашем приложении, но этого пока достаточно.

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

  • Приложение
  • Книжный магазин
  • Книги
  • Отзывы
  • Автор

Приложение является несущественным существительным, поэтому его можно отбросить. Мы также можем избавиться от книжного магазина, потому что он похож на приложение. Если бы нам нужно было что-то делать с несколькими книжными магазинами, мы могли бы его сохранить. У нас остались книги, обзоры и авторы. (Авторы во множественном числе, потому что у нас будет несколько авторов в этом приложении.)

Теперь давайте посмотрим, как мы будем проектировать каждый класс. Класс - это проект для создания объектов. Класс книги, который мы создаем, предоставит нам план создания объектов книги.

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

Задача

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

  1. Удерживать список элементов.
  2. Добавлять и удалять предметы из корзины.
  3. Рассчитать общее количество товаров в корзине.
  4. Получить информацию о клиенте.
  5. Создать квитанцию для покупок.

Классы

Чтобы спроектировать наш класс книг, нам нужно подумать над тем, что класс должен знать, и за что он несет ответственность. Для книги нам нужно знать название, автора и ISBN. Это наши атрибуты данных.

Вот некоторые действия, которые класс должен будет делать: это получить и установить заголовок, получить и установить автора, а также получить и установить ISBN. Это будут методы класса. Вот как выглядит наш класс книги, учитывая наши требования:

По соглашению имя класса имеет заглавные буквы. Конструктор - это специальная функция, которая объявляет и инициализирует атрибуты данных. Внутри функции конструктора атрибуты добавляются с помощью ключевого слова this. Далее, любые методы класса перечислены без каких-либо разделителей.

Методы, начинающиеся с get, известны как методы доступа, потому что они возвращают значение. Методы, начинающиеся с set, являются методами мутаторами, потому что они сохраняют значение или изменяют значение атрибута.

Это общий вид для определения класса:

Класс также может быть объявлен с использованием этого синтаксиса:

Классы могут также иметь статические методы. Статический метод - это метод, который является свойством класса, а не объекта. Предположим, мы хотим создать статический метод для нашего книжного класса для создания идентификаторов. Это синтаксис:

Чтобы вызвать метод:

Естественным вопросом было бы, когда и почему вы бы использовали статический метод? Я не могу сказать, что я знаю вескую причину использования статических методов. Это зависит от того, как вы создаете свой класс. Статический метод может использоваться как вспомогательный метод для ваших объектов, но тогда такие функции могут храниться в собственном классе. Если вы знаете хороший вариант использования, оставьте свои мысли в комментариях.

Наконец, для организации вы должны сохранить класс в качестве модуля. Модуль - это всего лишь файл, содержащий ваш код. Чтобы сделать наш класс книги в модуле, перед ним добавляется инструкция export.

Чтобы использовать класс Book в другом файле, мы его импортируем.

Где {} содержит значения, которые были экспортированы из модуля, а from Book - ссылка на файл Book.js.

Задача

Определите класс для авторов и отзывов.

Объекты

Сам класс бесполезен для нас, если мы с ним ничего не делаем. Мы хотим создавать книги. Для этого нам нужно создать экземпляр класса. Instantiate - это технический термин для создания новых объектов. Мы вызываем объект, созданный из экземпляра класса. Так мы создадим новый экземпляр книги:

Объекты должны быть созданы с помощью оператора new. Данные, переданные в объект, являются параметрами, которые мы определили в нашем конструкторе. Это общая форма для экземпляра класса:

Предположим, мы хотим добавить атрибуты в наш класс книг, например, ID, цену и количество на складе. Теперь у нас есть шесть параметров в нашем конструкторе, и это выглядит не очень красиво. На это просто неприятно смотреть. Это создает дополнительные усилия для разработчиков, использующих класс, потому что они должны знать порядок аргументов. Лучшим решением является передача объекта в качестве аргумента. Пример:

Чтобы создать экземпляр объекта:

В нашем примере мы могли бы также получить доступ к названию с помощью выражения book.title, потому что все атрибуты в классе являются общедоступными. Теперь вам может быть интересно, почему я создал все эти методы, если мы можем напрямую обращаться к атрибутам. Это просто показать вам синтаксис? Да. Кроме того, я хочу показать преимущества организации вашего кода таким образом.

Связывание кода в объекте известно как инкапсуляция. Одним из преимуществ инкапсуляции является скрытие данных. Скрытие данных означает, что атрибуты объекта не могут быть доступны за пределами класса.

В других языках, таких как Java и Python, мы можем иметь приватные атрибуты и приватные методы. Поскольку все наши данные общедоступны по умолчанию в классе JavaScript, мы не можем воспользоваться этой функцией. Тем не менее, мы должны получить доступ к нашим данным с помощью геттеров и сеттеров. Одно из соглашений - префикс атрибута с подчеркиванием _, чтобы сигнализировать о его приватности.

Задача

Создайте объект книги, который использует объект author для установки атрибута author.

Заключение

Мы узнали, что класс является проектом для создания объектов, а объект является экземпляром класса. Преимущество создания программного обеспечения в объектах заключается в том, что они делают структуру программы более управляемой.

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

Дальнейшее чтение

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.