Как работят функциите за обратно извикване

Когато за първи път научих метода „fetch()“, току-що запомних, че функцията за обратно извикване се изпълнява в блока „.then()“, без наистина да разбера как работи функцията за обратно извикване. В този блог ще се съсредоточа върху механиката на функцията за обратно извикване.

„MDN WebDocs“ дефинира функцията за обратно извикване като „функция, предадена на друга функция като аргумент, който след това се извиква във външната функция, за да завърши някакъв вид маршрутизиране или действие.“

Да кажем, че ще напиша код за симулиране на прост калкулатор. Моята функция ще приеме две числа и оператор, както е показано по-долу. Ако обаче имам нужда от различни операции, тогава ще трябва да продължа да добавям допълнителни оператори else if… във функцията на калкулатора.

function calculator(number1, number2, operator ) {
  if (operator === "add") {
    return number1 + number2;
  } else if (operator === "subtract") {
    return number1 - number2;
  } else if (operator === "multiply") {
    return number1 * number2;
  } else if (operator === "divide") {
    return number1 / number2;
  }
}
calculator(3, 5, "add");
=> 8
calculator(10, 5, "divide");
=> 2

Вместо това можем да напишем функция с функция за обратно извикване като аргумент и тази функция за обратно извикване се извиква вътре във външната функция (известна също като функция от по-висок ред). Освен това, когато използваме тази функция за обратно извикване като аргумент, ние не поставяме скоби „()“, тъй като не искаме да я извикаме веднага, а по-скоро предаваме метода на функцията на външната функция (от по-висок ред). Използвайки функция за обратно извикване, ако имаме нужда от допълнителни операции, всичко, което трябва да направим, е да добавим допълнителна операция като отделна функция, което прави кода лесен за четене и поддръжка.

function calculator(number1, number2, callbackFunction) {
  return callbackFunction(number1, number2);
}
function add(number1, number2) {
  return number1 + number2;
}
function subtract(number1, number2) {
  return number1 - number2;
}
function multiply(number1, number2) {
  return number1 * number2;
}
function divide(number1, number2) {
  return number1 / number2;
}
calculator(3, 5, add);
=> 8
calculator(10, 5, divide);
=> 2

Анонимна функция:

Вместо да извикваме съществуваща функция (add или subtract), можем да предадем анонимна функция като функции за обратно извикване:

function calculator(number1, number2, callbackFunction) {
  return callbackFunction(number1, number2);
}
calculator(3, 5, function(number1, number2) {
  return number1 + number2;
})
=> 8
calculator(10, 5, function(number1, number2) {
  return number1 - number2;
})
=> 5

Написано с функция стрелка:

calculator(3, 5, (number1, number2) => number1 + number2);
=> 8

Трудно ми беше да разбера функциите за обратно извикване, когато анонимните функции бяха използвани за обратно извикване. Използвайки дефинирани функции като обратни извиквания, разбрах по-добре как работят функциите за обратно извикване.

Как работят функциите за обратно извикване

Подобни въпроси