求分析 | 這段 JavaScript 程式碼的輸出為什麼是 5 ？

Question

下面這段程式碼，我以為會輸出1-10，結果輸出的是5，而且不停地輸出5，是個死循環，想不明白，求大神賜教。謝謝！

function initloop() {
    function doLoop(x) {
        i = 3;
        console.log(x);
    }

    for (var i = 0; i < 10; i++) {
        doLoop(i + 1);
    }
}

initloop();

Answer 1

那個 i 其實相當於是在 initloop 裡聲明的.

function initloop() {
    var i = 0;
    function doLoop(x) {
        i = 3;
        console.log(x);
    }
    for ( ; i < 10; i++) {
        doLoop(i + 1);
    }
    
}

initloop();

這樣看, 你腦補一下函數執行過程, 應該就明白了.
每次循環, i 都會在doloop 裡被修改成3,
doloop 執行結束後, 執行i++, 這時傳入loop 的實參應該就是4 + 1;
所以console 先是1, 然後一直死循環輸出5.
想要按你的想法輸出1 - 10, doloop 裡的i 加上var.讓它成為局部變量.

Answer 2

第一次循環 i=0,doloop實參 i+1即為1，所以第一次輸出是1。因為doloop函數內沒有i變量，會向外部作用域找出i變量，所以i=3會將循環體中的i賦值為3。第一次循環結束後因為i<10,所以i++即為4。從第二次開始i為4，所以dooloop實參為5，因為每執行一次dloop函數都會把i賦值為3，所以i總是小於10。結果就是第一次為1，然後循環列印5。

Answer 3

首先試運行了你的程式碼, 瀏覽器兩次被卡死... 我為我的瀏覽器默哀...
為此, 我才發現, 你的程式碼有毒...

實際運作時, 輸入如下:

1. for循環第一次時, i===0, 执行doLoop(1), 因此doLoop函数内部, 形参x===1, 接着又改变了外部i的值, 重置为3, 故此时i===3, 紧接着打印出了x的值, 即1.

2. for循環第二次時, 由於第一次循環結束時i===3, 发生自增操作, 即i++. 故i最终等于4. 4+1=5, 故执行doLoop(5),本次打印出了5. 函数内部重复上一次的操作, 外部i变量再次被重置为3,本次循环结束后i===5.

3. for循環第三次時, 重複上次操作, i再次被重置為3, 再次打印5, 以此类推, 最终外层的for循环失效, 每次i的值都被重置为3, 循環結束條件無法滿足. 故循環無法退出. 因此瀏覽器卡死.

總結下, 這樣的寫法是有問題的, 盡量不要在函數內部改變函數外部的變數.

Answer 4

每一次循環都把i賦值為3，而且dloop函數中的i又不是私有變量，所以每次都會把initloop中的i賦值為3，下一次循環i++，i就變成4，傳入dloop內自然每一印的都是5，解下來dloop又把i變成3，i永遠不會等於10，所以死循環