Понимание порядка выполнения функций в рекурсии

Question

Итак, я просматривал код для mergesort , который использует рекурсию. Я немного запутался в том, как работает код. Поскольку путаница связана с рекурсией, я помещаю аналогичный код ниже, который значительно упрощен и фокусируется только на части рекурсии:

var index = 0;

function parent() {
  console.log("parent called");
  if(index < 5) {
  index++;
  return child(parent()); 
  }
  else return 1;
}

function child() {
  console.log("child called"); 
}

parent();

Над выходными данными кода:

"parent called"
"parent called"
"parent called"
"parent called"
"parent called"
"parent called"
"child called"
"child called"
"child called"
"child called"
"child called"

ожидание «вызова дочернего элемента» после каждого «вызова родителя», поскольку parent вызывает child каждый раз, если index не становится больше или равно 5. Таким образом, после первого вызова parent, parent вызывает child, который затем вызывает parent и так далее. Так почему же вывод показывает пять последовательных «родительских вызовов», а затем пять последовательных «дочерних вызовов»?

Я пытался понять это с помощью визуализатора для стека вызовов в JS, но я все еще не понял почему child просто помещает parent в стек, но сам в это время не выполняется? Вы можете увидеть это в действии здесь .

Answer 1

child(parent()); 

parent должен быть вызван и завершен , прежде чем он вернет значение, которое может быть передано в child.

Итак, первый Вызывается parent, он переходит ко второй ссылке child(parent()) и рекурсивно вызывает вторую parent, которая переходит к третьей child(parent()) и так далее, пока что-то не вернет 1, и это можно будет передать child.

Answer 2

Когда вы делаете:

child(parent()); 

Он должен выполнить parent(), чтобы узнать, какое значение отправить в child. Таким образом, он продолжает вызывать parent, пока не дойдет до else return 1;, а затем продолжает передавать возвращаемое значение child