javascript - 为什么 typeof 回调变成了 number？

Question

我在回调和 requestAnimationFrame 方面遇到了一个非常奇怪的问题。第一次执行成功，第二次回调就变成了Number。

function TEST () {
    this.michou = "jean";
}

TEST.prototype.talk = function(fn) {
    window.requestAnimationFrame(this.talk.bind(this));
    alert(typeof fn); //type of callback
    fn();
};

var jean = new TEST();

jean.talk(function() {
    alert("hello");
});

如果您尝试此代码，您将在警报中看到“function”“hello”和“number”“number”。为什么回调类型显示“number”？

Answer 1

当您的 .talk() 函数在动画帧中被调用时，没有传递 fn 值(尽管传递了一些东西；请参阅以下)。如果你更改代码，你可以解决这个问题:

TEST.prototype.talk = function(fn) {
  window.requestAnimationFrame(this.talk.bind(this, fn));
  alert(typeof fn); //type of callback
  fn();
};

如果在将函数绑定(bind)到对象引用时传递 fn 作为第二个参数，则将使用正确的 this 值和 参数。

您的代码看到的数值是浏览器传递给动画帧回调的高分辨率时间戳。如果代码按上面的方式更改，它仍然会通过，但它将是第二个参数，而不是第一个。