javascript - requestAnimationFrame "Uncaught Type"错误

Question

所以我已经用 requestAnimationFrame 编写了一个工作应用程序(实际上是它的一半)。在项目变得太复杂之前，我急于以面向对象的风格重写它，以便我们可以更好地实现插件(并且还可以在不更改整个应用程序的情况下修复模块)。事实上，该应用程序的第一个版本真的很乱，是由大量测试代码组成的。

所以我有以下内容:

Aventura.prototype.update = function() {
  var av = this;
  requestAnimationFrame(av.update);

  /* ... frame code ... */
};

我在控制台日志中收到“Uncaught TypeError: Type error”，就在 requestAnimationFrame 行中。我知道我的浏览器有一个正确的 requestAnimationFrame 实现，因为我很好地使用了我的应用程序的困惑版本。

我得出的结论是它引发了一个异常，因为我正在调用一个方法，该方法是调用者自己的父对象的成员(我知道它是完全相同的方法，但问题显然不在于 self-打电话，因为那是英国皇家空军应该做的)。有什么问题的线索吗？

Answer 1

这与requestAnimationFrame无关。这是一个基本的 JavaScript 问题，与一般传递函数以及 this 的含义有关。

人们倾向于认为对象内部的函数值属性，比如下面的myFn

var myObj = {
    myFn: function() {console.log(this);}
};

myObj 以某种方式“嵌入”为 this。错误的。 this 仅在函数被调用 时赋值。如果我说 myObj.myFn()，this 就变成了 myObj，但我可以很容易地说 myObj.myFn.call( otherObj) 让 this 成为其他东西。

这在将函数作为参数传递给 setTimeout、promises 或 requestAnimationFrame 时变得很重要。只需传递 myObj.myFn 即可传递该函数，但它没有关联的 this。 requestAnimationFrame 不知道这个函数从哪里来，也不知道用什么 this 调用它，所以它用 window 的 this 调用它，或者 null，或者 0，或者 undefined，或者谁知道是什么。这会导致错误。

解决问题最简单的方法就是简单地说

requestAnimationFrame(function() {av.update(); });

现在使用正确的 this 调用 update。

一种更复杂、等效的方法是

requestAnimationFrame(av.update.bind(av));

其他说明

我认为您将函数本身传递给 requestAnimationFrame 的方式不会很好地工作。您实质上是在设置递归调用链，最终堆栈会溢出。您需要将要在 requestAnimationFrame 回调上执行的逻辑与请求帧的逻辑分开。