Что такое ооп javascript
ООП в JavaScript
В данной статье мы поговорим об основных особенностях объектно-ориентированного программирования в JavaScript:
Объекты в JavaScript
Объект в JavaScript — это ассоциативный массив, который содержит в себе наборы пар ключ-значение («хэш», «объект», «ассоциативный массив» означают в JavaScript одно и то же).
Создание объекта в JavaScript:
Задание свойств объекта:
Обращение к свойствам:
Constructor и ключевое слово new
Пример использования конструктора:
При вызове new Donkey (), JavaScript делает четыре вещи:
Инкапсуляция через замыкания
Замыкание — это основанный на области видимости механизм, который может создаваться через функцию. Каждая функция создаёт новую область видимости.
Рассмотрим два примера.
Анонимная самовызывающаяся функция позволяет начать выполнение функции сразу после ее объявления.
Мы применили принцип замыкания: объявляем функцию, передаем в неё фактическое значение, и она «замыкает» в себе значение переменной i. m попытается через замыкания получить значение из ближайшей верхней области видимости. А так как мы передали ее через самовызывающуюся функцию, то она каждый раз будет равна своему значению (значению переменной i ), и мы 10 раз получим от 0 до 9.
Этот пример про замыкания и инкапсуляцию взят из реального проекта:
Полиморфизм и ключевые слова call/apply
Применение конструкции apply :
Оба вызова идентичны, только apply позволяет передавать параметры через массив.
Четыре варианта вызова и его результаты:
Наследование и методы реализации
Модель базового фильтра — стандартный набор параметров, который есть в фильтре любого приложения. Эти параметры необходимы для пагинации, номера страницы и т.п.
Задаём ему метод через прототип. После получения модели сервера вызываем этот метод, и он преобразует некоторые наши данные в нужный формат.
Есть класс-наследник и конкретная страница “RouteHistorical”. Класс наследуется от базового фильтра, но дополнительно имеет свои поля и параметры.
В строке 73 мы передаём в базовый класс через контекст apply новосозданный объект RouteHistorical и те же аргументы. Метод инициализирует все поля, и мы получаем новый объект.
В строке 82 мы задаем свойству prototype.constructor ссылку на саму себя. Свойство класса constructor всегда ссылается на самого себя.
Прототипы
prototype нужен только для того, чтобы сказать, что нужно записать в __proto__ при инстанцировании нового объекта.
Две записи одинаковы, но обращаться напрямую к __proto__ считается небезопасным, и не все браузеры это позволяют.
Создание потомка из базового класса
instanceof
Позволяет определить, является ли объект экземпляром какого-либо конструктора на основе всей цепочки прототипирования.
Объектно-ориентированный JavaScript для начинающих
Разобравшись с основами, сосредоточимся на объектно-ориентированном JavaScript (OOJS) — данная статья даёт базовое представление о теории объектно-ориентированного программирования (ООП), далее рассмотрено как JavaScript эмулирует классы объектов с помощью функции-конструктора и как создаются экземпляры объектов.
| Необходимые знания: | |
|---|---|
| Цель: | Понять основную теорию объектно-ориентированного программирования, как это относится к JavaScript («все является объектом») и как создавать конструкторы и экземпляры объектов. |
Объектно-ориентированное программирование: основы
Начнём с упрощённого высокоуровневого представления о том, что такое объектно-ориентированное программирование (ООП). Мы говорим упрощённого, потому что ООП может быстро стать очень сложным, и если сейчас дать полный курс, вероятно, можно запутать больше, чем помочь. Основная идея ООП заключается в том, что мы используем объекты для отображения моделей из реального мира в наших программах и/или упрощения доступа к функциям, которые в противном случае было бы трудно или невозможно использовать.
Объекты могут содержать данные и код, представляющие информацию о том, что вы пытаетесь смоделировать, а также о том, какие у этих объектов должны быть функциональные возможности или поведение. Данные объекта (а часто так же и функции) могут быть точно сохранены (официальный термин «инкапсулированы») внутри пакета объекта, упрощая структуру и доступ к ним. Пакету объекта может быть присвоено определённое имя, на которое можно сослаться и которое иногда называют пространством имён. Объекты также широко используются в качестве хранилищ данных, которые могут быть легко отправлены по сети.
Определение шаблона объекта
Рассмотрим простую программу, которая отображает информацию об учениках и учителях в школе. Здесь мы рассмотрим теорию ООП в целом, а не в контексте какого-либо конкретного языка программирования.
В некоторых языках ООП, это общее определение типа объекта называется class (JavaScript использует другой механизм и терминологию, как вы увидите ниже) — это на самом деле не объект, а шаблон, который определяет, какие характеристики должен иметь объект.
Создание реальных объектов
Из нашего класса мы можем создать экземпляры объектов — объекты, содержащие данные и функциональные возможности, определённые в классе. Из нашего класса Person мы теперь можем создавать модели реальных людей:
Когда экземпляр объекта создаётся из класса, для его создания выполняется функция-конструктор класса. Этот процесс создания экземпляра объекта из класса называется создание экземпляра (instantiation) — из класса создаётся экземпляр объекта.
Специализированные классы
В нашем случае нам не нужны все люди — нам требуются учителя и ученики, которые являются более конкретными типами людей. В ООП мы можем создавать новые классы на основе других классов — эти новые дочерние классы могут быть созданы для наследования данных и характеристик родительского класса, так чтобы можно было использовать функциональные возможности, общие для всех типов объекта, вместо того чтобы дублировать их. Когда функциональность различается между классами, можно по мере необходимости определять специализированные функции непосредственно на них.
Это действительно полезно — преподаватели и студенты имеют много общих характеристик, таких как имя, пол и возраст, и удобно определить их только один раз. Вы можете также задать одну и ту же характеристику отдельно в разных классах, поскольку каждое определение этой характеристики будет находиться в отдельном пространстве имён. Например, приветствие студента может быть в форме «Yo, I’m [firstName]» (например Yo, I’m Sam), в то время как учитель может использовать что-то более формальное, такое как «Hello, my name is [Prefix] [lastName], and I teach [Subject].» (например Hello, My name is Mr Griffiths, and I teach Chemistry).
Теперь вы можете создавать экземпляры объекта из дочерних классов. Например:
Далее мы рассмотрим, как ООП теорию можно применить на практике в JavaScript.
Конструкторы и экземпляры объектов
JavaScript использует специальные функции, называемые функциями конструктора (constructor functions) для определения объектов и их свойств. Они полезны, потому что вы часто будете сталкиваться с ситуациями, в которых не известно, сколько объектов вы будете создавать; конструкторы позволяют создать столько объектов, сколько нужно эффективным способом, прикреплением данных и функций для объектов по мере необходимости.
Рассмотрим создание классов через конструкторы и создание экземпляров объектов из них в JavaScript. Прежде всего, мы хотели бы, чтобы вы создали новую локальную копию файла oojs.html, который мы видели в нашей первой статье «Объекты».
Простой пример
Итак, как мы вызываем конструктор для создания некоторых объектов?
Давайте снова посмотрим на вызовы конструктора:
После создания новых объектов переменные person1 и person2 содержат следующие объекты:
Обратите внимание, что когда мы вызываем нашу функцию-конструктор, мы определяем greeting() каждый раз, что не является идеальным. Чтобы этого избежать, вместо этого мы можем определить функции на прототипе, о которых мы поговорим позже.
Создавая наш готовый конструктор
Дальнейшие упражнения
Для начала, попробуйте добавить ещё пару собственных строк создания объекта и попробуйте получить и установить элементы полученных экземпляров объектов.
Примечание: Если у вас возникли трудности с решением задачи, мы предоставили ответ в нашем репозитории GitHub (см. это в действии) — но сначала попробуйте написать сами!
Другие способы создания экземпляров объектов
Конструктор Object ()
Прежде всего, вы можете использовать конструктор Object() для создания нового объекта. Да, даже общие объекты имеют конструктор, который генерирует пустой объект.
Использование метода create()
Одно ограничение метода create() заключается в том, что IE8 не поддерживает его. Поэтому конструкторы могут быть более эффективными, если вы хотите поддерживать старые браузеры.
Подробнее мы рассмотрим особенности метода create() немного позже.
Сводка
В этой статье представлен упрощённый взгляд на объектно-ориентированную теорию — это ещё не вся история, но она даёт представление о том, с чем мы имеем дело. Кроме того, мы начали рассматривать различные способы создания экземпляров объектов.
В следующей статье мы рассмотрим прототипы объектов JavaScript.
Объектно-ориентированный JavaScript простыми словами
Доброго времени суток, друзья!
В JavaScript существует 4 способа создать объект:
Для того, чтобы ответить на эти вопросы мы не только рассмотрим каждый подход в отдельности, но и сравним между собой классы и фабричные функции по следующим критериям: наследование, инкапсуляция, ключевое слово «this», обработчики событий.
Давайте начнем с того, что такое объектно-ориентированное программирование (ООП).
Что такое ООП?
По сути, ООП — это способ написания кода, позволяющий создавать объекты с помощью одного объекта. В этом также заключается суть шаблона проектирования «Конструктор». Общий объект, обычно, называется планом, проектом или схемой (blueprint), а создаваемые с его помощью объекты — экземплярами (instances).
Каждый экземпляр имеет как свойства, наследуемые от родителя, так и собственные свойства. Например, если у нас имеется проект Human (человек), мы можем создавать на его основе экземпляры с разными именами.
Второй аспект ООП состоит в структурировании кода, когда у нас имеется несколько проектов разного уровня. Это называется наследованием (inheritance) или классификацией (созданием подклассов) (subclassing).
Третий аспект ООП — инкапсуляция, когда мы скрываем детали реализации от посторонних, делая переменные и функции недоступными извне. В этом заключается суть шаблонов проектирования «Модуль» и «Фасад».
Перейдем с способам создания объектов.
Способы создания объекта
Функция-конструктор
Конструкторами являются функции, в которых используется ключевое слово «this».
this позволяет сохранять и получать доступ к уникальным значениям создаваемого экземпляра. Экземпляры создаются с помощью ключевого слова «new».
Класс
Классы являются абстракцией («синтаксическим сахаром») над функциями-конструкторами. Они облегчают задачу создания экземпляров.
Обратите внимание, что constructor содержит тот же код, что и функция-конструктор, приведенная выше. Мы должны это делать, чтобы инициализировать this. Мы может опустить constructor, если нам не требуется присваивать начальные значения.
На первый взгляд, классы кажутся сложнее, чем конструкторы — приходится писать больше кода. Придержите лошадей и не делайте поспешных выводов. Классы — это круто. Чуть позже вы поймете почему.
Экземпляры также создаются с помощью ключевого слова «new».
Связывание объектов
Данный способ создания объектов был предложен Kyle Simpson. В данном подходе мы определяем проект как обычный объект. Затем с помощью метода (который, как правило, называется init, но это не обязательно, в отличие от constructor в классе) мы инициализируем экземпляр.
Для создания экземпляра используется Object.create. После создания экземпляра вызывается init.
Код можно немного улучшить, если вернуть this в init.
Фабричная функция
Фабричная функция — это функция, возвращающая объект. Можно вернуть любой объект. Можно даже вернуть экземпляр класса или связывания объектов.
Вот простой пример фабричной функции.
Для создания экземпляра нам не требуется ключевое слово «new». Мы просто вызываем функцию.
Теперь давайте рассмотрим способы добавления свойств и методов.
Определение свойств и методов
Методы — это функции, объявленные в качестве свойств объекта.
В ООП существует два способа определения свойств и методов:
Определение свойств и методов в конструкторе
Для определения свойства в экземпляре необходимо добавить его в функцию-конструктор. Убедитесь, что добавляете свойство к this.
Методы, обычно, определяются в прототипе, поскольку это позволяет избежать создания функции для каждого экземпляра, т.е. позволяет всем экземплярам использовать одну функцию (такую функцию называют общей или распределенной).
Для добавления свойства в прототип используют prototype.
Создание нескольких методов может быть утомительным.
Можно облегчить себе жизнь с помощью Object.assign.
Определение свойств и методов в классе
Свойства экземпляра можно определить в constructor.
Свойства прототипа определяются после constructor в виде обычной функции.
Создание нескольких методов в классе проще, чем в конструкторе. Для этого нам не нужен Object.assign. Мы просто добавляем другие функции.
Определение свойств и методов при связывании объектов
Для определения свойств экземпляра мы добавляем свойство к this.
Метод прототипа определяется как обычный объект.
Определение свойств и методов в фабричных функциях (ФФ)
Свойства и методы могут быть включены в состав возвращаемого объекта.
При использовании ФФ нельзя определять свойства прототипа. Если вам нужны такие свойства, можно вернуть экземпляр класса, конструктора или связывания объектов (но это не имеет смысла).
Где определять свойства и методы
Где следует определять свойства и методы? В экземпляре или в прототипе?
Многие считают, что для этого лучше использовать прототипы.
Однако на самом деле это не имеет особого значения.
При определении свойств и методов в экземпляре, каждый экземпляр будет расходовать больше памяти. При определении методов в прототипах, память будет расходоваться меньше, но незначительно. Учитывая мощность современных компьютеров, эта разница является несущественной. Поэтому делайте так, как вам удобней, но все же предпочитайте прототипы.
Например, при использовании классов или связывания объектов, лучше использовать прототипы, поскольку в этом случае код легче писать. В случае ФФ прототипы использовать нельзя. Можно определять только свойства экземпляров.
Прим. пер.: позволю себе не согласиться с автором. Вопрос использования прототипов вместо экземпляров при определении свойств и методов — это не только вопрос расходования памяти, но, прежде всего, вопрос назначения определяемого свойства или метода. Если свойство или метод должны быть уникальными для каждого экземпляра, тогда они должны определяться в экземпляре. Если свойство или метод должны быть одинаковыми (общими) для всех экземпляров, тогда они должны определяться в прототипе. В последнем случае при необходимости внесения изменений в свойство или метод достаточно будет внести их в прототип, в отличие от свойств и методов экземпляров, которые корректируются индивидуально.
Предварительный вывод
На основе изученного материала можно сделать несколько выводов. Это мое личное мнение.
Классы против ФФ — Наследование
Прежде чем переходить к сравнению классов и ФФ, необходимо познакомиться с тремя концепциями, лежащими в основе ООП:
Что такое наследование?
В JavaScript наследование означает передачу свойств от родительского объекта к дочернему, т.е. от проекта к экземпляру.
Это происходит двумя способами:
Понимание создания подклассов
Создание подклассов — это когда дочерний проект расширяет родительский.
Рассмотрим это на примере классов.
Создание подклассов с помощью класса
Для расширения родительского класса используется ключевое слово «extends».
Например, давайте создадим класс «Developer», расширяющий класс «Human».
Класс «Developer» будет расширять Human следующим образом:
Ключевое слово «super» вызывает constructor класса «Human». Если вам это не нужно, super можно опустить.
Допустим, Developer умеет писать код (кто бы мог подумать). Добавим ему соответствующий метод.
Вот пример экземпляра класса «Developer».
Создание подклассов с помощью ФФ
Для создания подклассов с помощью ФФ необходимо выполнить 4 действия:
Создадим подкласс «Developer». Вот как выглядит ФФ «Human».
Добавляем ему метод «code».
Создаем экземпляр Developer.
Перезапись родительского метода
Иногда возникает необходимость перезаписать родительский метод внутри подкласса. Это можно сделать следующим образом:
Тот же процесс с использованием ФФ.
Наследование против композиции
Разговор о наследовании редко обходится без упоминания композиции. Эксперты вроде Eric Elliot считают, что всегда, когда это возможно, следует использовать композицию.
Что же такое композиция?
Понимание композиции
По сути, композиция — это объединение нескольких вещей в одну. Наиболее распространенным и самым простым способом объединения объектов является использование Object.assign.
Композицию легче всего объяснить на примере. Допустим, у нас имеется два подкласса, Developer и Designer. Дизайнеры умеют разрабатывать дизайн, а разработчики — писать код. Оба наследуют от класса «Human».
Теперь предположим, что мы хотим создать третий подкласс. Этот подкласс должен быть смесью дизайнера и разработчика — он должен уметь как разрабатывать дизайн, так и писать код. Назовем его DesignerDeveloper (или, если угодно, DeveloperDesigner).
Как нам его создать?
Мы не может одновременно расширить классы «Designer» и «Developer». Это невозможно, поскольку мы не можем решить, какие свойства должны быть первыми. Это называется проблемой ромба (ромбовидным наследованием).
Проблема ромба может быть решена с помощью Object.assign, если мы отдадим одному объекту приоритет над другим. Однако, в JavaScript не поддерживается множественное наследование.
Здесь нам пригодится композиция.
Данный подход утверждает следующее: вместо создания подкласса «DesignerDeveloper», создайте объект, содержащий навыки, которые можно включать в тот или иной подкласс по необходимости.
Реализация этого подхода приводит к следующему.
Нам больше не нужен класс «Human», ведь мы можем создать три разных класса с помощью указанного объекта.
Вот код для DesignerDeveloper.
Мы можем сделать тоже самое для Designer и Developer.
Вы заметили, что мы создаем методы в экземпляре? Это лишь один из возможных вариантов. Мы также можем поместить методы в прототип, но я нахожу это лишним (при таком подходе кажется, что мы вернулись к конструкторам).
Используйте тот подход, который считаете самым подходящим. Результат будет одинаковым.
Композиция с помощью ФФ
Композиция с помощью ФФ заключается в добавлении распределенных методов в возвращаемый объект.
Наследование и композиция
Никто не говорил, что мы не можем использовать наследование и композицию одновременно.
Возвращаясь к примеру с Designer, Developer и DesignerDeveloper, нельзя не отметить, что они также являются людьми. Поэтому они могут расширять класс «Human».
Вот пример наследование и композиции с использованием синтаксиса классов.
А вот тоже самое с использованием ФФ.
Подклассы в реальном мире
Несмотря на то, что многие эксперты утверждают, что композиция по сравнению с подклассами является более гибкой (и поэтому более полезной), подклассы нельзя сбрасывать со счетов. Многие вещи, с которыми мы имеем дело, основаны на этой стратегии.
Например: событие «click» является MouseEvent (событием мыши). MouseEvent — это подкласс UIEvent (событие пользовательского интерфейса), который, в свою очередь, является подклассом Event (событие).
Другой пример: HTML Elements (элементы) являются подклассами Nodes (узлов). Поэтому они могут использовать все свойства и методы узлов.
Предварительный вывод относительно наследования
Наследование и композиция могут использоваться как в классах, так и в ФФ. В ФФ композиция выглядит «чище», но это незначительное преимущество перед классами.
Классы против ФФ — Инкапсуляция
По сути, инкапсуляция — это скрытие одной вещи внутри другой, из-за чего внутренняя сущность становится недоступной снаружи.
В JavaScript скрываемыми сущностями являются переменные и функции, которые доступны только в текущем контексте. В данном случае контекст — это тоже самое, что область видимости.
Простая инкапсуляция
Простейшей формой инкапсуляции является блок кода.
Находясь в блоке, можно получить доступ к переменной, объявленной за его пределами.
Обратите внимание, что переменные, объявленные с помощью ключевого слова «var», имеют глобальную или фукнциональную область видимости. Старайтесь не использовать var для объявления переменных.
Инкапсуляция с помощью функции
Функциональная область видимости похожа на блочную. Переменные, объявленные в функции, доступны только внутри нее. Это относится ко всем переменным, даже объявленным с помощью var.
Когда же мы находимся внутри функции, то имеем доступ к переменным, объявленным за ее пределами.
Функции могут возвращать значения, которые могут быть использованы впоследствии за пределами функции.
Замыкание
Замыкание — это продвинутая форма инкапсуляции. Это просто функция внутри другой функции.
Переменные, объявленные в outsideFunction, могут использоваться в insideFunction.
Инкапсуляция и ООП
При создании объектов мы хотим, чтобы одни свойства были открытыми (публичными), а другие закрытыми (частными или приватными).
Рассмотрим пример. Скажем, у нас имеется проект «Car». При создании нового экземпляра мы добавляем ему свойство «fuel» (топливо) со значением 50.
Пользователи могут использовать это свойство для определения количества оставшегося топлива.
Пользователи также могут самостоятельно устанавливать количество топлива.
Давайте добавим условие, согласно которому бак автомобиля вмещает максимум 100 литров топлива. Мы не хотим, чтобы пользователи имели возможность самостоятельно устанавливать количество топлива, потому что они могут сломать машину.
Существует два способа это сделать:
Частные свойства по соглашению
В JavaScript частные переменные и свойства, обычно, обозначаются с помощью нижнего подчеркивания.
Как правило, мы создаем методы для управления частными свойствами.
Для определения и установки количества топлива пользователи должны использовать методы «getFuel» и «setFuel», соответственно.
Но переменная «_fuel» в действительности не является частной. Она доступна извне.
Для ограничения доступа к переменным следует использовать настоящие частные поля.
По-настоящему частные поля
Поля — это термин, объединяющий переменные, свойства и методы.
Частные поля классов
Классы позволяют создавать частные переменные с помощью префикса «#».
К сожалению, данный префикс нельзя использовать в конструкторе.
Частные переменные должны определяться вне конструктора.
В данной случае мы можем инициализировать переменную при определении.
Теперь переменная «#fuel» доступна только внутри класса. Попытка получить к ней доступ за пределами класса приведет к возникновению ошибки.
Для управления переменной нам нужны соответствующие методы.
Лично я предпочитаю использовать для этого геттеры и сеттеры. Я нахожу такой синтаксис более читаемым.
Частные поля ФФ
ФФ создают частные поля автоматически. Нам нужно лишь объявить переменную. Пользователи не смогут получить доступ к этой переменной извне. Это происходит благодаря тому, что переменные имеют блочную (или функциональную) область видимости, т.е. являются инкапсулированными по умолчанию.
Для управления частной переменной «fuel» также используются геттеры и сеттеры.
Вот так. Легко и просто!
Предварительный вывод относительно инкапсуляции
Инкапсуляция с помощью ФФ проще и легче для восприятия. Она основана на области видимости, которая является важной частью JavaScript.
Инкапсуляция с помощью классов предполагает использование префикса «#», что может быть несколько утомительным.
Классы против ФФ — this
this — главный аргумент против использования классов. Почему? Потому что значение this зависит от того, где и как this используется. Поведение this часто сбивает с толку не только новичков, но и опытных разработчиков.
Однако, на самом деле концепция this не так уж и сложна. Всего существует 6 контекстов, в которых может использоваться this. Если вы разбираетесь в этих контекстах, у вас не должно возникать проблем с this.
Названными контекстами являются:
Использование this в классах
При использовании в классе this указывает на создаваемый экземпляр (контекст свойства/метода). Вот почему экземпляр инициализируется в constructor.
Использование this в функциях-конструкторах
При использовании this внутри функции и new для создания экземпляра, this будет указывать на экземпляр.
В отличии от ФК в ФФ this указывает на window (в контексте модуля this вообще имеет значение «undefined»).
Таким образом, в ФФ не следует использовать this. В этом состоит одно из основных отличий между ФФ и ФК.
Использование this в ФФ
Для того, чтобы иметь возможность использовать this в ФФ, необходимо создать контекст свойства/метода.
Несмотря на то, что мы можем использовать this в ФФ, нам это не нужно. Мы можем создать переменную, указывающую на экземпляр. Такая переменная может использоваться вместо this.
human.firstName является более точным, нежели this.firstName, поскольку human явно указывает на экземпляр.
На самом деле нам даже не нужно писать human.firstName. Мы можем ограничиться firstName, поскольку данная переменная имеет лексическую область видимости (это когда значение переменной берется из внешнего окружения).
Рассмотрим более сложный пример.
Сложный пример
Условия таковы: у нас имеется проект «Human» со свойствами «firstName» и «lastName» и методом «sayHello».
Также у нас имеется проект «Developer», наследующий от Human. Разработчики умеют писать код, поэтому у них должен быть метод «code». Кроме того, они должны заявлять о своей принадлежности к касте разработчиков, поэтому нам необходимо перезаписать метод «sayHello».
Реализуем указанную логику с помощью классов и ФФ.
Классы
Создаем проект «Human».
Создаем проект «Developer» с методом «code».
Перезаписываем метод «sayHello».
ФФ (с использованием this)
Создаем проект «Human».
Создаем проект «Developer» с методом «code».
Перезаписываем метод «sayHello».
ФФ (без this)
Поскольку firstName за счет лексической области видимости доступна напрямую мы можем опустить this.
Предварительный вывод относительно this
Простыми словами, классы требуют использования this, а ФФ нет. В данном случае я предпочитаю использовать ФФ, поскольку:
Классы против ФФ — Обработчики событий
Во многих статьях по ООП упускается из виду тот факт, что как фронденд-разработчики мы постоянно имеем дело с обработчиками событий. Именно они обеспечивают взаимодействие с пользователями.
Поскольку обработчики событий изменяют контекст this, работа с ними в классах может быть проблематичной. В тоже время в ФФ таких проблем не возникает.
Однако изменение контекста this не имеет значения, если мы знаем, как с этим справиться. Рассмотрим простой пример.
Создание счетчика
Для создания счетчика воспользуемся полученными знаниями, включая частные переменные.
Наш счетчик будет содержать две вещи:
Вот как может выглядеть разметка:
Создание счетчика с помощью класса
Для облегчения задачи попросим пользователя найти и передать разметку счетчика классу «Counter»:
В классе необходимо получить 2 элемента:
Далее мы инициализируем переменную «count» текстовым содержимым countElement. Указанная переменная должна быть частной.
При нажатии кнопки значение счетчика должно увеличиваться на 1. Реализуем это с помощью метода «increaseCount».
Теперь нам необходимо обновить DOM. Реализуем это с помощью метода «updateCount», вызываемого внутри increaseCount:
Осталось добавить обработчик событий.
Добавление обработчика событий
Добавим обработчик к this.buttonElement. К сожалению, мы не можем использовать increaseCount в качестве функции обратного вызова. Это приведет к ошибке.
Исключение выбрасывается, потому что this указывает на buttonElement (контекст обработчика событий). В этом можно убедиться, если вывести значение this в консоль.
Значение this необходимо изменить таким образом, чтобы оно указывало на экземпляр. Это можно сделать двумя способами:
Добавление обработчика событий с помощью bind
bind возвращает новую функцию. В качестве первого аргумента ему передается объект, на который будет указывать this (к которому this будет привязан).
Это работает, но выглядит это не очень хорошо. К тому же bind — это продвинутая функция, с которой сложно иметь дело новичкам.
Стрелочные функции
Стрелочные функции, помимо прочего, не имеют собственного this. Они заимствуют его из лексического (внешнего) окружения. Поэтому код счетчика может быть переписан следующим образом:
Есть еще более простой способ. Мы можем создать increaseCount в виде стрелочной функции. В этом случае this будет указывать на экземпляр.
Вот полный код примера:
Создание счетчика с помощью ФФ
Начало аналогичное — мы просим пользователя найти и передать разметку счетчика:
Получаем необходимые элементы, которые по умолчанию будут частными:
Инициализируем переменную «count»:
Значение счетчика будет увеличиваться с помощью метода «increaseCount». Вы можете использовать обычную функцию, но я предпочитаю другой подход:
DOM будет обновляться с помощью метода «updateCount», который вызывается внутри increaseCount:
Обратите внимание, что вместо this.updateCount мы используем counter.updateCount.
Добавление обрабочика событий
Мы можем добавить обработчик событий к buttonElement, используя counter.increaseCount в качестве колбэка.
Это будет работать, поскольку мы не используем this, поэтому для нас не имеет значения то обстоятельство, что обработчик меняет контекст this.
Первая особенность this
Вы можете использовать this в ФФ, но только в контексте метода.
В следующем примере при вызове counter.increaseCount будет вызван counter.updateCount, поскольку this указывает на counter:
Однако обработчик событий работать не будет, потому что значение this изменилось. Данная проблема может быть решена с помощью bind, но не с помощью стрелочных функций.
Вторая особенность this
При использовании синтаксиса ФФ, мы не можем создавать методы в виде стрелочных функций, потому что методы создаются в контексте функции, т.е. this будет указывать на window:
Поэтому при использовании ФФ я настоятельно рекомендую избегать использования this.
Вердикт относительно обработчиков событий
Обработчики событий меняют значение this, поэтому использовать this следует крайне осторожно. При использовании классов советую создавать колбэки обработчиков событий в виде стрелочных функций. Тогда вам не придется прибегать к услугам bind.
При использовании ФФ рекомендую вообще обходиться без this.
Заключение
Итак, в данной статье мы рассмотрели четыре способа создания объектов в JavaScript:
Во-вторых, мы увидели, что подклассы легче создавать с помощью классов. Однако, в случае композиции лучше использовать ФФ.
В-третьих, мы резюмировали, что, когда речь идет об инкапсуляции, ФФ имеют преимущество перед классами, поскольку последние требуют использования специального префикса «#», а ФФ делают переменные частными автоматически.
В-четвертых, ФФ позволяют обойтись без использования this в качестве ссылки на экземпляр. В классах приходится прибегать к некоторым хитростям, дабы вернуть this исходный контекст, измененный обработчиком событий.
На этом у меня все. Надеюсь, статья вам понравилась. Благодарю за внимание.