如何理解这个JavaScript function的流程

Question

我是在 HTML/CSS 之后学习 JavaScript 的初学者。 我在 Head First 这本书的最开始，努力理解这个 function。

这个 function 在每一步中是如何工作的？ 从thingamajig(5) 开始会发生什么？

 function clunk(times) { var num = times; while (num > 0) { display("clunck"); num = num - 1; } } function thingamajig(size) { var facky = 1; clunkCounter = 0; if (size == 0) { display("clanck"); } else if (size == 1) { display("thunk"); } else { while (size > 1) { facky = facky * size; size = size - 1; } clunk(facky); } } function display(output) { console.log(output); clunkCounter = clunkCounter + 1; } var clunkCounter = 0; thingamajig(5); console.log(clunkCounter);

Answer 1

当我们运行它时会发生以下情况：

• 从顶部开始，我们定义了三个不同的函数： clunk 、 thingamajig和display

• 然后我们初始化一个名为clunkCounter的变量并为其分配数字0

• 然后我们调用thingamajig function，传入参数5作为size参数

• 在thingamajig中，我们将进入else分支，我们最终会经历 4 次while循环，所以我们实际上是在执行facky = 1 * 5 * 4 * 3 * 2 ，所以facky最终得到一个值120

• 然后我们调用clunk(120)

• 所以我们会调用display("clunk") 120 次

• 只display日志"clunk" ，并作为副作用增加clunkCounter ，以记录我们这样做了多少次

• 然后最后我们注销clunkCounter ，这将是120

我们为什么要这样做？ 我不知道。 这是一个非常人为的示例，它演示了如何使用 if/else 条件和递增变量。 我不会太担心这一切“意味着”什么。 如果您还没有，请尝试在浏览器控制台中运行它，并四处看看如果您更改传递给thingamajig的值会发生什么。

编辑：很好解释。 只是补充一点，它计算一个数字的阶乘并在最后打印它的值。

Answer 2

它以thingamajig(5);

function thingamajig(size) {
var facky = 1;
clunkCounter = 0;
if (size == 0) {
    display("clanck");
} else if (size == 1) {
    display("thunk");
} else {
    while (size > 1) {
        facky = facky * size;
        size = size - 1;
    }
    clunk(facky);
}

}

它以“5”作为参数，这意味着“size”变量为 5，并开始检查 if 块中的条件。

现在让我们看看。 大小为 5，因此它将跳过 if 块的前 2 部分

`if (size == 0) {
display("clanck");
} else if (size == 1) {
display("thunk");
}`

并执行 else 部分

else {
        while (size > 1) {
            facky = facky * size;
            size = size - 1;
        }
        clunk(facky);
    }

这个 while 循环将一直工作到 size > 1，这意味着 size 应该为 1 才能中断循环。 while循环中有一些计算。

“facky”变量发生变化，但最终“size”变量将为“1”，“facky”变量为 96

当“while 循环”结束时，它将调用clunk(facky);

这意味着

`function clunk(96) {
    var num = 96;
    while (96 > 0) {
        display("clunck");
        num = num - 1;
    }
}`

此 function 将调用“显示”function 96 次。 并显示 function 将在控制台中控制台记录“clunck”字 96 次。

最后 clucnkCounter 将被控制台记录。

我希望我能正确理解这个问题。 因为以书面形式回答这个问题很难。

Answer 3

• 在 thingamajig() function 中，该值被传递 5。
• 并检查其是否与 0 或 1 匹配，然后转到 else 块，这里是 while 循环。 faky 变量的初始值为 1，但在这里它的值被再次赋值，所以它变成了 5，并且大小减少了，所以变成了 4
• 再次在其大于 1 时，再次 5*4=20，faky 变为 20。
• 同时继续直到 size 值为 1。当 size 值为 1 时，facky 变为 120。
• (5)x(4)x(3)x(2) = 120
• 现在叮叮当当 function 被调用，次数 = 120
• 这里 num = 次，所以 num = 120
• 当 num > 0 时，它调用另一个 function 显示，console.log（输出）。 这里 output = "clunk"。
• 并将 clunkCounter 的值增加 1。
• 它不断重复直到 num = 0，并使 clunkCounter = 120

Answer 4

- 代码从 function thingamajig(size)中的 else 代码块开始执行，因为 if 和 else if 语句为假。

else {
      while (size > 1) {
      facky = facky * size;
      size = size - 1; }
      clunk(facky); }
      }

在 else 语句中，我们有一个带有条件(size > 1)的 while 循环，在调用thingamajig(5)时， size 是 5 作为 size 参数的参数插入；。

当条件变为false时，代码循环直到 size = 1。

1. LOOP 1，size = 5，facky is = 1，facky = 1 * 5 = 5，size - 1 =size 变为 4。

2. 循环 2，当 size = 4，facky = 5，facky = 4 * 5 = 20，size - 1 = size 变为 3。

3. LOOP 3，当 size = 3，facky = 20，facky = 3 * 20 = 60，size - 1 = size 变为 2。

4. 循环 4，当 size = 2，facky = 60，facky = 3 * 60 = 120，size - 1 = size 变为 1。

• 在循环停止之前调用clunk() function 并将 facky 作为参数传递给 times 参数，function clunk 开始执行。

  function clunk(次) { var num = times; while (num > 0) { display("clunk"); 数 = 数 - 1； } }

这里，times = facky = 120 = num，while 循环开始执行，直到条件变为false时 num = 0，在此循环中，使用字符串 'clunk' 作为参数调用display() function。

function display(output) {
         console.log(output); 
         clunkCounter = clunkCounter + 1;
      }

• display('clunk') function 开始执行。
• 'clunk' 字符串被复制到 output 参数中，并记录到控制台和 clunkCounter 变量增量中。 - 两者都继续记录字符串 'clunk' 并递增 clunckCounter，直到 num = 0，因为 num 从 120 递减直到它变为 0。

结果

console.log(output);

• 'clunk' 字符串登录控制台 120 次。

console.log(clunkCounter); -clunkCounter 递增到 120，因此 120 被记录到控制台。

Answer 5

对于那些仍然不明白的人（就像我第一次看到这个时我不明白），要理解的主要事情是每次 while 循环运行时“faky”都会改变值。 所以如果你从 thingamajig(5) 开始，facky=5。 但是随后大小变为“size = 4”，这使得您再次通过while循环 go 。 这一次 facky 将是“facky=5x4”，因此它是“facky=20”。 然后你 go 通过 while 循环再次使用“size = 3”使其成为“facky = 20x3”并且它是“facky = 60”。 最后一次通过while循环，你得到“facky = 60x2”，因此它是“facky = 160”。