请帮我递归函数

Question

美好的一天。 有一个递归函数：

 function f(counter) { counter--; document.write("<p style='background: blue'>" + counter); if(counter != 0) { f(counter); } document.write("<p style='background: yellow'>" + counter); } f(3); 

我不明白它是如何工作的。

在函数中获取3-值计数器。 然后计数器减少，变为2。下一步将显示蓝色部分2的值。然后计数器不为0的条件-函数递归调用自身。 在下一个开始时，计数器值减小并变为1。然后单位显示在蓝色部分。 然后再次触发条件，因为即使计数器不为0，函数也会再次调用自身，将计数器减小为0，并在蓝色部分输出0。 下一步计数器处于递归调用终止的状态。 函数在黄色部分输出0。 但是我不知道为什么黄色区域的1号和2号航站楼？

我知道为什么在蓝色部分输出2、1、0的原因-因为条件会在if（counter！= 0）触发并且函数调用自身。 如果counter == 0，则不会触发条件，并且f（0）终止呼叫-结论黄色部分为0。 但是为什么要完成前面的函数调用-1和2在黄色部分而不是蓝色输出它们，这不是我可以理解的。

Answer 1

如果您没有处理过递归操作，可能会造成混乱，但是我将尝试解释一下：

您致电： f(3)

因此它进入并调用： document.write("<p style='background: blue'>" + counter);

该打印然后用2蓝线计数器是2的后counter-- ，然后它调用f(2)因为counter != 0 ，因为它是2。）

因此它调用： document.write("<p style='background: blue'>" + counter);

其打印，然后用1个蓝色线作为计数器是1的后counter-- ，然后它调用f(1)因为counter != 0 ，因为它是1）

因此它调用： document.write("<p style='background: blue'>" + counter);

该打印然后用0作为计数器的后是0蓝线counter-- ，那么它不调用f(0)因为counter == 0 ）

因此，现在我们完成了我们所在的功能（其中'counter == 0'），它调用： document.write("<p style='background: yellow'>" + counter);

它将打印然后带0的黄线，因为计数器为0

然后回到函数，我们从counter == 1调用f(0) ，然后调用document.write("<p style='background: yellow'>" + counter);

它打印然后带1的黄线，因为计数器是1

然后回到函数，我们从f(1)开始， counter == 2 ，然后调用document.write("<p style='background: yellow'>" + counter);

它将打印然后带有2的黄线，因为计数器是2

我知道这很令人困惑，但希望对您有所帮助？

* 编辑 *这是我更详细的解释，希望非常清楚！

这是我的尝试：

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter);

    if(counter != 0) {
        f(counter) // counter equals 2
    }

    document.write("<p style='background: yellow'>" + counter);
}

因此，仅用实际调用的内容替换上面的f(counter) aka f(2) （将counter w / counter2放置为计数器，因为它们是单独的变量：

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter);

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2);

            if(counter2 != 0) {
                f(counter2) // counter2 equals 1
            }

            document.write("<p style='background: yellow'>" + counter2);
        }
    }

    document.write("<p style='background: yellow'>" + counter);
}

现在，再次将f(counter2) aka f(1)替换为实际调用的内容（将counter2替换为counter3，因为它们又是单独的变量）。

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter); // prints 2

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2); // prints 1

            if(counter2 != 0) {
                 counter3 = counter2;
                 counter3--;
                 document.write("<p style='background: blue'>" + counter3);  // prints 0

                 if(counter3 != 0) { // counter3 equals 0 so this is false
                     f(counter3);  // this is never called because counter3 DOES equal 0
                 }

                 document.write("<p style='background: yellow'>" + counter3);  // prints 0
            }

            document.write("<p style='background: yellow'>" + counter2); // prints 1
        }
    }

    document.write("<p style='background: yellow'>" + counter); // prints 2
}

Answer 2

这是因为counter是一个范围为f的局部变量。

// value of counter = 2
document.write("<p style='background: blue'>" + counter);

if(counter != 0) {
    f(counter) // calling f(2), must wait for function to return before continuing.
}

// after return, the value of counter is still 2 because it's a local variable
document.write("<p style='background: yellow'>" + counter);

Answer 3

但是为什么要完成前面的函数调用-1和2在黄色部分而不是蓝色输出它们，这不是我可以理解的。

因为在执行f（3）之后，函数不会终止并且正在等待f（2）调用完成。 完成后，它会更进一步并将3写入黄色div。 对于每个计数器，依此类推。

想象一下f不是在内部调用自身，而是在其他函数myFunc调用。 等待myFunc结束。 与递归相同。

Answer 4

这可能是因为变量“ counter”是函数f中的局部变量。 您应该缓存该变量，以便f按照您的描述运行。 在这里检查以下答案： javascript中的循环变量和递归，它描述了类似的问题及其解决方案。

Answer 5

我意识到我们递归调用f（2），f（1），f（0），但是当if（counter！= 0）时，此条件将不起作用，因此我们不会结束调用。 显示屏将以黄色显示0。 现在我们需要完成函数f（1）和f（2）的其余部分，这些函数具有document.write ("<p style = 'background: yellow'>" + counter) ; 。 事实证明，当我们完成这些挑战时，输出1和2会显示为黄色。