Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 Итак, вообразим следующую задачу: необходимо сделать объект, содержащий в себе коллекцию (чего угодно), итерируемым. На практике это означает, что мы можем идти циклом for...of по самому объекту, хотя, как мы знаем, по умолчанию это невозможно. Пример:

3 Во втором примере, obj представляет из себя итерируемый объект (iterable object). Мы можем самостоятельно сделать его таким:

4 Напомню, что Symbol - это специальный неизменяемый тип данных. В основном используется в свойствах объектов. js предоставляет несколько встроенных символов, одним из которых и является iterator.

5 Чтобы сделать любой объект итерируемым, нужно создать свойство Symbol.iterator и записать туда специальную функцию, о структуре которой мы сейчас и поговорим.

6 Эта функция не является общей для всех итерируемых объектов, ее содержимое зависит от объектов, для которых она предназначена. Общее правило - функция должна реализовывать The iterable protocol.

7 Функция makeIterator не имеет параметров, потому что так она вызывается внутри js. Из этого следует, что доступ к текущему объекту, к которому она прикреплена, возможен только через this, а значит она должна быть объявлена как functionDeclaration, а не arrowFunction. Требование к возвращаемому значению этой функции следующее:

8 Необходимо вернуть объект с методом next. Каждый вызов next будет возвращать объект с двумя свойствами: value и done. Свойство value - это значение текущего элемента коллекции, а done - это флаг конца коллекции. Как только next завершает перебор, то возвращается { done: true }, и это является сигналом, что итерирование завершено.

9 Можно продемонстрировать работу этой функции, немного переписав ее для возможности прямого вызова:

10 Еще раз отмечу, что выше мы создали пример только для демонстрации. В реальном коде такая функция не сделает объект итерируемым.

11 Именно так будет вызываться next, скрыто от наших глаз в момент итерации по объекту.

12 Что можно заметить, глядя на эту функцию? Она содержит в себе скрытое состояние, которое необходимо для запоминания текущей позиции. Как мы помним, состояние - штука сложная, и программируя в таком стиле, легко допустить ошибку.

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

14 Как видно из примера, генераторы вводят новый синтаксис в язык. Во-первых, это звездочка после слова function. Она просто указывает на то, что мы имеем дело с генератором. Во-вторых, выражение yield (подчеркиваю: это - не инструкция).

15 Генератор в отличие от обычной функции при своем вызове не выполняет тело, а возвращает специальный объект с методом next. Каждый раз, когда вызывается next, запускается тело генератора с того места, где оно остановилось последний раз. При первом вызове выполнение идет с самого начала генератора и продолжается до встречи с выражением yield. В этот момент управление передается наружу, next возвращает то, что было передано в yield, а генератор замирает в этом состоянии, на выражении yield. Последующие вызовы начинают работу от yield.

16 Еще один пример для осознания:

17 Или даже так:

18 Кроме yield в генераторах можно использовать версию yield*, которая ожидает на вход коллекцию и делает yield для каждого элемента этой коллекции.

19 Теперь можно переписать наш первый пример вот таким образом: