Если вы когда-нибудь называли себя веб-разработчиком, то наверняка имели дело с JavaScript. Это как хлеб с маслом для каждого веб-разработчика. И вы, вероятно, встречали JS-функции, которые выглядят как вложенные функции в Java, но ведут себя довольно странно. Итак, я буду объяснять концепцию функций обратного вызова в JS, сравнивая функции / методы двух языков - Java и JavaScript, которые имеют похожие имена, но их имена связаны во многом как перерыв и завтрак.
Сравнение методов Java и JS
Вот как выглядит типичный метод Java: -
У него есть модификатор доступа, тип возвращаемого значения и параметры с определенными типами данных, бла-бла, вы знаете, что делать.
Вот как выглядит функция JavaScript: -
В JavaScript функция - это объект; его можно присвоить переменной, получить к нему доступ как к атрибуту объекта по его идентификатору. И * барабанная дробь * также может быть передана в качестве аргумента другой функции! (Мы поговорим об этом в ближайшее время, следите за обновлениями).
Например:-
Из этого объекта вы можете получить доступ к функции с именем «доставка» точно так же, как вы получили бы доступ к любому другому атрибуту объекта.
type = pizza.delivery ();
Это присвоит значение «Takeaway» переменной «type». Однако, если вы откроете его без скобок, он присвоит переменной функцию определение: -
type = pizza.delivery;
Теперь type () - это функция JS с тем же определением, что и delivery ().
Функция обратного вызова JavaScript
Как следует из названия, функция обратного вызова «вызывается обратно» после выполнения другой функции. Как упоминалось ранее, в JS функции являются объектами, и, как и объекты, они могут быть переданы в качестве параметров другой функции, а также могут быть возвращены другой функцией.
Пример функции обратного вызова в JS: -
obj.reverse (intentSuggestions, function (err, res) {
console.log (res);
});
Здесь первый параметр функции «reverse» - это «intentSuggestions», а второй - (как вы уже догадались) функция обратного вызова.
Создадим!
Сначала откройте консоль разработчика Chrome (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) и введите в консоль следующее:
function sayMyName(name, petname, callback) { callback(); alert(`The name's ${name} but you can call me ${petname}`); } sayMyName('Joey', 'Sweetie', function() { alert('How you doin?'); });
Приведенный выше код отправляет два предупреждения друг за другом: «Как дела?», За которым следует «Меня зовут Джоуи, но вы можете называть меня Конфетка».
Следующий фрагмент кода лучше научит вас тому, что здесь происходит. Введите в консоль следующее:
function caller(called) { called(); alert(`This is the caller function speaking after the called function even though I was the one to call it in the first place! Damn that guy gets all the attention`); } caller(function() { alert(`This is the called function speaking and I love attention`); });
Концепция функции обратного вызова особенно важна при работе с Node.js, поскольку нам нужно, чтобы функция выполнялась только после того, как у нас есть все предпосылки. Например, когда вы делаете запросы к API, вам нужно дождаться ответа, прежде чем вы сможете действовать в соответствии с этим ответом. Таким образом, вызывающая функция может доставить вам еду, а вызываемая функция может принять ваш заказ. Вы не можете доставить еду до того, как разместите заказ, верно?
Бонус: функция обещания в JavaScript
При работе с JavaScript и особенно с Node.js функции обратного вызова вкладываются в другие функции обратного вызова и так далее. Код может выглядеть так: -
function myStatus(id, callback) { openDatabase(function(db) { getCollection(db, 'personalInfo', function(col) { find(col, {'id': id},function(result) { result.filter(function(user) { callback(user.status === "Pending") }) }) }) }) }
По сути, это просто возвращает логическое значение true или false в зависимости от того, находится ли пользователь в базе данных с именем «personalInfo» как «Pending» или нет.
С обещаниями JavaScript, а не функцией, принимающей обратный вызов, он может вернуть обещание, после которого вызывающая функция будет ждать, пока обещание (функциональность) не будет выполнено, и затем она выполнит свое собственный функционал. Метод с именем .then () позаботится о вызове метода после выполнения обещания.
function myStatus(id) { return openDatabase() .then(getCollection) .then(find.bind(null, {'id': id})) .then(function(user) { return user.status === "Pending"; }); }
Этот код делает то же самое, и ему намного легче следовать. Получение данных из базы данных, поиск столбца по идентификатору и последующий возврат значения соответствующего поля - все это невозможно сделать сразу, если они должны выполняться один за другим.
Ссылка на действительно полезную статью для более глубокого понимания функций обещания здесь.
Найдите меня в LinkedIn.
Если вы действительно зашли так далеко и чувствуете, что узнали об этой статье или что-то не так, пожалуйста, оставьте отзыв.