Что происходит с моим кодом JavaScript, это не идет с потоком

Question

var f1 = function () {
  console.log('f1');
};

var f2 = function (callback) {
  console.log('f2');
  return callback;
};

var f3 = function (callback) {
  console.log('f3');
  callback();
};

f3(f2(f1));

Я хочу написать программу, которая печатает f3 f2 f1. Но я не могу понять результат. Я использовал отладку Chrome и выбрал строку f3(f2(f1)); - точка останова. И это меня удивило, что это началось с f2. Не могли бы вы объяснить это мне?

Answer 1

Когда вы вызываете функцию f3(...), вам нужно разрешить аргументы, которые вам нужно проанализировать. Следовательно, f2(f1) будет называться первым.

Теперь в f2 вы регистрируетесь перед возвратом обратного вызова. Следовательно, журнал начинается с f2.

---

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

Ниже приведен пример для этого:

var f1 = function () {
  console.log('f1');
};

var f2 = function (callback) {
  console.log('f2');
  return callback();
};

var f3 = function (callback) {
  console.log('f3');
  callback();
};

f3(f2.bind(null, f1));

Answer 2

f3 (f2 (f1))

Перед запуском функции f3, сначала f3 получит аргументы, поскольку аргумент является вызовом функции (f2 (f1)), его необходимо выполнить, чтобы продолжить выполнение функции, которая вызывает f2 (f1):

f1 - это просто обратный вызов, а не вызов функции, поэтому он не будет выполнен

f2 зарегистрирует ('f2') и вернет f1 в качестве обратного вызова (без вызова)

f3 получит результаты (f1 как обратный вызов), f3 выполнит log ('f3') и затем вызовет функцию f1 (возвращенный обратный вызов), которая log ('f1').

Answer 3

JavaScript выполнит f3, но вы передадите параметр в f3. Таким образом, f2 выполнится и напечатает f2. f2 возвращает обратный вызов f3 в качестве параметра, поэтому f3 выполняет для печати f3 и выполняет обратный вызов (f1). Наконец f1 выполнить для печати f1.