Программная инженерия

Обратные вызовы JS на примерах

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

👁‍🗨 Использование обратного вызова для отображения промежуточных результатов при вызове функции

Вы когда-нибудь задумывались, откуда берутся магические параметры, такие как element или (value, key) в .forEach цикле?

Когда вы дойдете до конца этого раздела, вы поймете это.

Предположим, у вас есть функция halfAlgebra. Он принимает число в качестве своего первого параметра, делит его пополам, а затем позволяет вам использовать результат в другой функции, которую вы можете указать в качестве второго параметра halfAlgrebra.

Вот как можно написать такую ​​функцию:

👆 Выше, в конце, anotherFunction( half ) выполняется. Это делает переменную half доступной для любых функций обратного вызова, которые вы можете ввести в качестве второго параметра функции halfAlgebra. Вот как:

👆 Здесь, если указать addOne в качестве параметра обратного вызова, эта функция будет выполняться неявно И использовать half в качестве параметра. Таким образом, он фактически выполняется как addOne( half ).

Вы также можете вводить функции напрямую как параметр обратного вызова (т. Е. Как анонимную функцию). Анонимные функции обратного вызова также имеют доступ к переменной half:

Кстати, переменную half вызывать не обязательно. Вы можете ссылаться на него как хотите (важны позиции параметров, а не имена):

Итак, когда вы видите переменные обратного вызова в JS, например, в element или (value, key) в методе .forEach, теперь вы знаете, как они создаются.

🔗 Используйте обратный вызов, чтобы функция запускалась как часть другого

Представьте, что у вас есть функция, которая может соединить два слова вместе:

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

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

👆 Здесь параметр обратного вызова имеет анонимную функцию по умолчанию. Функция обратного вызова по умолчанию гарантирует, что stitch работает нормально, если при вызове функции не вводится параметр обратного вызова.

Представьте, что у вас есть еще одна функция, которая заставляет все звучать взволнованно:

Теперь вы можете добавить функцию excited в качестве параметра обратного вызова функции stitch, изменив ее вывод:

👆 Вы можете рассматривать excited как плагин к stitch.

Вы также можете добавить анонимную функцию в качестве параметра обратного вызова, чтобы вносить индивидуальные изменения в вывод на ходу:

📚 Используйте обратные вызовы в методе

Конечно, вы также можете использовать обратные вызовы в методах. Вот как это делается на примере:

В заключении

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

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

Надеюсь, вам понравилось читать!