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();
}

然而，如果width > 100更改为width > 50，可以看到这在第3次迭代时突然停止。

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

似乎值可能会通过引用传递给它们不应该的位置，但我认为JS中的数字是通过复制值传递的，而更多的是我从头开始创建大多数传递的值，例如..., x + width, ...和width2 = width * 0.5。

为什么程序无效。

感谢Benni稍作修正。

Answer 1

变量总是在Javascript中按值传递。它甚至不支持通过引用传递参数。

问题在于您使用的是全局变量：

width2 = width * 0.5;

当您进行第一次递归调用时，它将更改全局变量的值，因此第二次递归调用将使用上次迭代的值。

在函数中声明变量，使其为local：

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);
}

Javascript通过引用问题传递数字与简单的递归函数

2 个答案: