JavaScript通過引用問題傳遞數字，簡單的遞歸函數

Question

我已經構建了這個簡單的遞歸函數。

遞歸很容易看到，因爲它應該繪製一個像嵌套模式的框。這些盒子每次迭代都會略微向下移動，以便在有重疊線條的地方更清晰。

___________ 
1. |   | 
    |   | 
    |   | 
    |   | 
    |   | 
    |___________| 

    ___________ 
2. |___________| 
    |  |  | 
    |  |  | 
    |  |  | 
    |  |  | 
    |_____|_____| 
    |_____|_____| 

    __ __ __ __ 
3. |___________| 
    |_____|_____| 
    | | | | | 
    | | | | | 
    | | | | | 
    |__|__|__|__| 
    |__|__|__|__| 
    |__|__|__|__| 

http://codepen.io/alan2here/pen/reFwo

var canvas = document.getElementById('canvas').getContext('2d'); 

box(50, 50, 150, 150); 

function box(x, y, width, height) { 
    // draw the box 
    line(x, y, x + width, y); 
    line(x, y, x, y + height); 
    line(x, y + height, x + width, y + height); 
    line(x + width, y, x + width, y + height); 

    // continue with a tree like nested pattern of sub-boxes inside this one. 
    if (width > 100) { 
     width2 = width * 0.5; 
     box(x, y + 5, width2, height); 
     box(x + width2, y + 5, width2, height); 
    } 
} 

function line(x, y, x2, y2) { 
    canvas.beginPath(); 
    canvas.moveTo(x, y); 
    canvas.lineTo(x2, y2); 
    canvas.closePath(); 
    canvas.stroke(); 
} 

然而，這種突然停止工作在迭代3，如可如果width > 100可以看出改變爲width > 50。

__ __ __ __ 
3. |_____  | 
    |__|__|  | 
    | | |  | 
    | | |  | 
    | | |  | 
    |__|__|_____| 
    |__|__| 
    |__|__| 

看來，如果值可以得到通過參考，他們不應該是過去了，但是我想通過複製值傳遞的JS數字，更重要的是我創建的大部分傳遞的值從從頭開始，例如..., x + width, ...和width2 = width * 0.5。

爲什麼程序無法正常工作。

---

感謝Benni的輕微更正。

Answer 1

變量總是在Javascript中值傳遞。它甚至不支持通過引用傳遞參數。

的問題是，您使用的是全局變量：

width2 = width * 0.5; 

當您第一次循環調用它會改變全局變量的值，所以第二個遞歸調用將使用來自值最後一次迭代。

聲明變量的函數，以便它是本地的：

var width2 = width * 0.5; 

Answer 2

第一個猜測：更改您的代碼

if (width > 100) { 
    var width2 = width * 0.5; 
    box(x, y + 5, width2, height); 
    box(x + width2, y + 5, width2 , height); 
}