Введение в объектно-ориентированный JavaScript

По какой-то причине в ИТ-отрасли существует тенденция считать, что если вы не используете методы объектно-ориентированного программирования (ООП), то вы не «настоящий программист». Это на самом деле довольно глупая позиция, потому что во многих ситуациях ООП не является наиболее подходящим способом решения проблемы. Это недостаток таких языков, как Java, который вынуждает ООП выполнять любую задачу программирования независимо от того, нужна она вам или нет.

JavaScript (который почти не имеет ничего общего с Java) - это совсем другой язык. Это обеспечивает практически неограниченную свободу и универсальность, с уменьшенной сложностью в большинстве областей. К сожалению, есть некоторые вещи, которые являются более сложными в JavaScript из-за свободы, которую он пытается вам дать.

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

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

ОК, это сложно, но это не так сложно

Прежде чем вы начнете думать, что концепция объектно-ориентированного JavaScript слишком сложна для вас, подумайте, что вы уже используете ООП, даже если не знаете об этом. Пуристы могут не согласиться, но я думаю, что было бы справедливо сказать, что если вы уже используете HTML и CSS и иногда используете JavaScript для манипулирования элементами HTML на веб-странице, то вы уже опытный программист ООП.

Каждый элемент HTML на веб-странице на самом деле является объектом. Все они вписываются в иерархию Document Object Model (DOM), что означает, что у них есть определенный класс, определенные свойства и определенное наследование. Если вы явно не установите значение свойства, все объекты будут использовать свои значения свойств по умолчанию. Когда вы пишете инструкцию CSS, в действительности вы используете метод для изменения одного или нескольких значений свойств класса.

Каждый раз, когда вы пишете инструкцию HTML, вы создаете новый экземпляр класса. И, как вы наверняка уже знаете, вы можете создавать свои собственные классы на основе заранее определенного класса для каждого типа объекта (например, вы можете создать <h2 class = ”subheading”>, который может иметь свойства, весьма отличающиеся от исходного класса это было создано из). Вы можете указать, что объекты H2 с этим классом будут отличаться по цвету и размеру от обычных объектов H2. И вы можете повторно использовать эти измененные объекты так часто, как вам нравится. Исходный объект H2 является шаблоном объекта, а ваш новый класс является производным от класса шаблона.

Так что да, ООП не так просто, но вы, вероятно, уже делаете это, так чего же бояться?

Следующий уровень: создание собственных объектов

Работать со встроенными объектами DOM слишком просто. Вам нужно больше проблем. Создание собственных объектов - это первый шаг к более высокому уровню ООП.

Со всей этой преамбулой вы, вероятно, ожидаете, что создание объекта - это сложная задача, требующая большого количества сложного кода. Конечно, если вы когда-либо пытались создать пользовательские классы объектов на языке, таком как Java или C #, вы будете ожидать создания длинного конструктора классов. Вот как мы делаем это в JavaScript:

Ну, это было анти-климатическое, да? Мы создали пустой объект класса «myObject». Очевидно, пустые объекты скучны, потому что они ничего не делают, кроме как занимают место в памяти. Чтобы быть полезным, объект должен иметь содержимое. Давайте рассмотрим более практичный класс:

Выше показан объект с именем objAlien, который имеет все эти различные свойства (обычные переменные) и методы (функции), определенные в нем. Технически, тогда, вы также можете рассматривать объект как массив переменных и / или функций.

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

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

Этот код сделает 20 слизистыми зелеными инопланетянами, разместив их на пикселях 110 (так что из этого можно предположить, что изображение, используемое для хранения инопланетянина, имеет ширину 100px, и между каждым пришельцем есть поле 10px). Очевидно, конечно, что это не хороший способ реализовать игру на JavaScript, потому что есть лучшие методы, но эта статья не о создании игр, а о создании и использовании объектов.

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

Здесь мы можем увидеть действительно сложный способ использования объекта, когда значения объекта передаются свойству attr объекта R. Если вы знакомы с JSON (JavaScript Object Notation), то вы можете подумать, что первая часть примера использует JSON с синтаксическими ошибками, но на самом деле это не код JSON.

Причина, по которой имена переменных, кроме fill, заключаются в кавычки, заключается в том, что JavaScript не обрабатывает оператор минус в именах переменных (которые являются свойствами CSS). С тех пор как была написана эта программа, были внесены изменения, позволяющие записывать свойства CSS, такие как font-family, как fontFamily, но этот унаследованный код не был адаптирован для использования этих изменений.

Зачем использовать объекты?

Объекты лучше всего подходят для ситуаций, когда вам нужно создать несколько экземпляров чего-либо или когда вам нужен простой способ группировки данных, относящихся к чему-то определенного типа. В приведенном выше примере игры мы видим, что можно было создать несколько копий объекта objAlien, но мы также могли манипулировать свойствами объекта после его добавления, которым в данном примере было свойство x.

Когда не использовать объекты?

Вы не должны использовать объекты, если они не нужны в вашем проекте. Бесполезно слишком усложнять ваши программы без веской причины. Если ваша программа разработана для чего-то простого, методы ООП не требуются.

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

В таких языках, как Java и даже Visual Basic, создание объектов является большой задачей. Это потому, что вам нужно создать шаблон класса (или использовать уже существующий), на котором вы должны основать свой объект, прежде чем сможете его определить. Это не обязательно в JavaScript, потому что нам дан простой метод построения (objectname = {…}). Объекты в JavaScript также могут включать переменные любого типа, в том числе массивы, а объявления типов не существуют. Возвращаемые значения не являются обязательными.

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

Вы вполне могли бы ожидать, что приведенная выше строка кода поместит 5 в элемент с идентификатором «par1». Но если бы вы набрали что-то вроде:

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

Один из способов проверить это:

Этот ответ немного экстремальный, но вы поняли идею. Обратите внимание, что мы проверяем «! ==», а не «! =», Что легко запутать. Вот еще один способ сделать это:

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

Очевидно, вы также можете изменить значения свойств таким же образом. Чтобы удалить свойство favourFlavor из объекта, нам нужно сделать это:

Есть очень немного ситуаций, когда это когда-либо будет необходимо.

Делая объекты более пригодными для повторного использования

Вы, вероятно, заметили самую большую потенциальную проблему с созданием объектов, которая заключается в том, что если вы хотите иметь разные типы инопланетян, вам нужно сделать свойство objAlien.type массивом. Но есть и другой способ, который лучше.

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

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

Итак, теперь для создания объектов на основе прототипа мы можем сделать это:

Это то же самое, что делать это:

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

Что дальше?

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

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.