Javascript 为什么此requestAnimationFrame设置无法正确执行？

渲染画布的函数是一个类的原型方法，如下所示：

Engine.prototype.renderCameras = function() { console.log('render ok'); }

window.requestAnimFrame(engine.renderCameras)
>>> 0

当我尝试在Chrome或Firefox中使用requestAnimationFrame运行它时，我得到以下结果：

window.requestAnimFrame(engine.renderCameras())
>>> render ok
>>> Error: Component returned failure code: 0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) [nsIDOMWindow.mozRequestAnimationFrame]

它运行，但总是抛出错误。那不酷

当我尝试这样运行它时：

Engine.prototype.renderCameras = function() { console.log('render ok'); }

window.requestAnimFrame(engine.renderCameras)
>>> 0

它什么也不做

我可以通过使用闭包来解决这个问题，但我仍然想知道为什么不能将这样的函数传递给requestAnimationFrame

window.requestAnimFrame(engine.renderCameras())

不是将函数传递给requestAnimFrame，而是将engine.renderCameras的返回值传递给requestAnimFrame。返回值可能不是函数，因此会出现此错误

window.requestAnimFrame(engine.renderCameras)

相反，正确地传递函数引用，但内部renderCameras不会引用引擎。如果您依赖于我根据设置假设的设置，则必须正确地传递调用engine.renderCameras的函数：

window.requestAnimFrame(function(){
    engine.renderCameras();
});

或用于显式设置和绑定：

window.requestAnimFrame(engine.renderCameras.bind(engine));

无论哪种方式，您都必须重复调用window.requestAnimFrame以获取下一个动画帧，这意味着您通常使用递归函数。例如：

window.requestAnimFrame(function render(){
    engine.renderCameras();
    window.requestAnimFrame(render);
});

---

啊，对了，我从来没有实际使用过.bind，但这是一个完美的测试用例。实际上，我将requestAnimationFrame放在一个固定的设置间隔内，这样我就可以设置一个目标fps。