Как связать методы JS в цепочку, чтобы писать лаконичный и читаемый код.
Привет!
В этой статье хочу поделиться с вами знаниями о такой концепции, как цепочка методов, широко используемой в языке JavaScript.
Проблема
Довольно часто при программировании вам требуется много раз подряд преобразовывать фрагмент данных, чтобы привести его в желаемое конечное состояние. Каждое из этих преобразований будет выполняться определенной функцией / методом и должно выполняться в определенном порядке.
Обычно вы читаете код сверху вниз, слева направо. Итак, если вы видели фрагмент кода, который выглядит примерно так, ваш инстинкт будет читать его следующим образом:
Однако поток данных через серию функций на самом деле противоположен. Самая внутренняя вложенная функция фактически передает возвращаемое значение вверх по списку:
В результате, чтобы гарантировать получение правильного возвращаемого значения, вам придется в значительной степени писать функции в обратном порядке их использования при их создании. В этом примере, вы должны сначала написать method3, так как он будет выполнятся первым и первым обрабатывать данные.
Как вы понимаете, чем больше функций вы добавляете, тем сложнее становится отлаживать их. Но ведь было бы намного проще понять небольшой код, если бы мы могли выполнять функции в том порядке, в котором мы их читаем?
Цепочка методов
Если вы когда-либо использовали запрос fetch в JavaScript, вы видели что-то вроде этого:
Даже если вы никогда этого не видели, синтаксис позволяет легко понять что здесь происходит. Это называется цепочкой методов, и, как вы, вероятно, догадались по слову «then», код выполняется сверху вниз, точно так, как он читается. Каждая функция передает свое возвращаемое значение следующему методу в цепочке.
Так, как это работает?
Ну, первое, что вы должны понять, это this. Ключевое слово this само по себе является совершенно другой важной темой, поэтому, если вы хотите узнать об этом больше, вот подробное руководство, которое поможет вам. На данный момент все, что вам нужно знать, это то, что когда мы создаем новый объект с использованием синтаксиса:
newObject = new myClass()
и вызываем методы этого класса, this указывает на сам объект, в котором используется. Поскольку newObject это экземпляр класса myClass, он будет иметь доступ ко всем методам, определенным в рамках класса myClass. Если мы хотим получить доступ к методу, определенному в этом классе, мы можем использовать внутри этого класса:
this.myMethod()
Теперь, чтобы объединить методы в цепочку, нам нужно убедиться, что каждый метод, который мы определяем, имеет возвращаемое значение, которым является this, чтобы мы могли вызвать для него другой метод (это вся концепция цепочки). Давайте посмотрим на пример.
1) Мы начинаем с создания нового класса
class ChainableObject {}
2) Затем мы добавляем в класс несколько методов, которые возвращают this
Теперь мы можем протестировать наш код, создав новый экземпляр класса ChainableObject и вызвав каждый из его методов в цепочке.
И это весь процесс работы цепочки методов! Теперь вы можете применить эти знания в более сложных реальных приложениях.
Спасибо за просмотр!
Если вам понравилась статья - можете оценить её. Если есть вопросы - напиши их в комментарии, я на них отвечаю.
Если хотите больше контента по JavaScript можете перейти на мой канал и подписаться, чтобы не пропускать новых публикаций.