如何理解這個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”。