Если вы когда-нибудь называли себя веб-разработчиком, то наверняка имели дело с 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.

Если вы действительно зашли так далеко и чувствуете, что узнали об этой статье или что-то не так, пожалуйста, оставьте отзыв.