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

Question

我正在使用 JS 和 jQuery 在 Canvas 上绘制形状。我有一个渲染循环函数，可以使用对象中的信息重新绘制形状。该对象已被定义，代码运行一次循环，然后该对象变为未定义，我不知道为什么。我不做太多 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():连续绘制和重绘 Canvas 的递归函数。

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

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

Answer 1

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

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