函数表达式参数未赋值，但有值

Question

我希望有人能解释下面的函数表达式是如何工作的。参数 'p' 没有被赋值，但它在函数体中用于计算（定义“角度”和“尾巴”变量），并在调用 draw() 时用作参数对象。当您单步执行代码时，您可以看到参数“p”确实有一个值（见附图） - 但我不明白该值来自哪里。请注意，在查看完整代码后，不会在其他任何地方注明“p”。

当您将“p”记录到控制台时，您会看到以下值，这些值会随着应用程序的运行而继续增加： Image of console.log(p);

这是完整的函数表达式和函数调用：

var draw = function(p) { 
  $.fillStyle = "hsla(38,5%,12%,.90)";
  $.fillRect(0, 0, w, h); 
  $.fillStyle = "hsla(38, 25%, 90%, 1)"; 
  $.strokeStyle = "hsla(38, 25%, 90%, 1)";
  for (var i = 0; i < numh; i++)
    for (var j = 0; j < numw; j++) {
      var diagnalW = j * spacing +
        (i % 2 ? 0 : spacing / 2);
      var diagnalH = i * spacing;
      var arr = [position[0] - diagnalW,
          position[1] - diagnalH
        ],
        wave = Math.sqrt(arr[0] * arr[0] +
          arr[1] * arr[1]),
        arr = [arr[0] / wave, arr[1] / wave],
        angle = 50 * (Math.cos(p / 360 - wave / 105) - 1);
      $.beginPath();
      $.arc(diagnalW + arr[0] * angle, diagnalH +
        arr[1] * angle, 2.8, 0, 2 * Math.PI, false);
      $.closePath();
      $.fill();
      for (var n = 0; n < 5; n++) {
        var tail = 50 * (Math.cos((p - 50 * n) /
          360 - wave / 105) - 1);
        $.beginPath();
        $.moveTo(diagnalW + arr[0] * angle, diagnalH +
          arr[1] * angle);
        $.lineWidth = 5 - n;
        $.lineTo(diagnalW + arr[0] * tail, diagnalH + arr[1] * tail);
        $.stroke()
      }
    }
};

var anim = function(p) {
  window.requestAnimationFrame(anim);
  draw(p);
};
anim();

除了“p”如何获取控制台中显示的值之外，我了解此代码的所有内容。另外 - 如果不清楚，这是一个 html5 画布应用程序。

（旁注：不，上面的 $ 不是 jQuery。它只是原作者用于她的画布上下文对象的东西。）

Answer 1

在对draw 的第一次 调用中，p 将具有值undefined，因为anim() 没有传递p 的值，然后anim 使用p 调用 draw 时。

在之后，draw 被浏览器调用，而不是被该代码调用，因为它被用作requestAnimationFrame 的回调。浏览器将使用高分辨率计时器值调用它，这就是您在 p 中看到的内容。

Answer 2

p是window.requestAnimationFrame的回调参数

一个参数，指定在为下一次重绘更新动画时调用的函数。回调只有一个参数，DOMHighResTimeStamp，它表示requestAnimationFrame 开始触发回调的当前时间（从performance.now() 返回的时间）。