Javascript在循环中第二次执行函数时抛出未定义的错误

Question

我正在使用 JS 和 jQuery 在画布上绘制形状。我有一个渲染循环函数，它使用来自对象的信息重绘形状。该对象已被定义，代码运行一次循环，然后对象变为未定义，我不知道为什么。我不怎么做 JS，所以我不确定我是否遗漏了一些明显的东西。我检查了许多其他线程，但似乎无法找到为什么我的值在定义后变为未定义状态。下面是代码的简化版本：

$document.ready{

    const canvas = $canvas;
    const context = canvas.getContext();

    const 2dArray = [ [...], ..., [...] ];
    const object = { coords: {x:5, y:5}, shape: 2dArray};
    render(canvas, context, object);
});

function render(canvas, context, object){
    drawFunction(canvas, context, object);
    requestAnimationFrame(render);
};

function drawFunction(canvas, context , object){
    drawShape(context, object.coords, object.shape);
};

快速简化运行：

• drawShape()：遍历 2D 数组以从 3x3 正方形网格中形成“形状”。
• drawFunction()：执行 drawShape() 和其他一些位。
• render()：递归函数，用于连续绘制和重绘画布。

发生的情况是 drawFunction() 在渲染循环中执行一次，然后再次执行，然后再次执行 drawShape()，“对象”现在变得未定义。我不明白这一点，因为它已经被定义和使用了？形状正在被绘制一次，但随后出现问题。

感谢任何帮助，请随时告诉我，我是个白痴，错过了一些愚蠢而简单的事情。

Answer 1

requestAnimationFrame 不带任何参数调用给定函数。所以render() 函数第二次不会收到任何参数。要解决这个问题，您可以使用Function.prototype.bind 绑定函数的参数。

function render(canvas, context, object){
    drawFunction(canvas, context, object);
    requestAnimationFrame(render.bind(null, canvas, context, object));
}