使用此关键字的 requestAnimationFrame

Question

我正在使用 webkitRequestAnimationFrame 但在对象内部使用它时遇到问题。如果我传递 this 关键字，它将使用 window 并且我找不到让它使用指定对象的方法。

示例：

Display.prototype.draw = function(){
  this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  //Animation stuff here.

  window.webkitRequestAnimationFrame(this.draw);
};

我也尝试过，但没有成功：

Display.prototype.draw = function(){
  this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  //Animation stuff here.

  var draw = this.draw;
  window.webkitRequestAnimationFrame(draw);
};

Answer 1

我正在尝试传递 webkitRequestAnimationFram 所在的函数display.draw。

webkitRequestAnimationFrame 可能会调用您传入的函数，如下所示：

function webkitRequestAnimationFrame(callback)
{
    // stuff...
    callback();
    // other stuff...
}

此时，您已将 draw 函数与其调用上下文分离（分离）。您需要将函数 (draw) 绑定到其上下文（Display 的实例）。

您可以使用 Function.bind ，但这需要 JavaScript 1.8 支持（或者只使用推荐的补丁）。

Display.prototype.draw = function()
{
    // snip...

    window.webkitRequestAnimationFrame(this.draw.bind(this));
};

Answer 2

现在 ES6/2015 已经到来，如果您使用的是转译器，那么箭头函数具有词法 this 绑定，因此

window.webkitRequestAnimationFrame(this.draw.bind(this));

您可以执行以下操作而不是：：

window.webkitRequestAnimationFrame(() => this.draw());

这更干净一点。

我已经将 Typescript 转换为 ES5 来有效地使用它。

Answer 3

我不能保证这是一个好主意并且我是对的，但是在每个 requestAnimationFrame 上运行 .bind 意味着在每次迭代上创建一个新函数。这对我来说听起来不太合适。

这就是为什么在我的项目中我缓存了绑定函数以避免反模式。

简单的例子：

var Game = function () {
    this.counter = 0;
    this.loop = function () {
        console.log(this.counter++); 
        requestAnimationFrame(this.loop);
    }.bind(this);
    this.loop();
}
var gameOne = new Game();

如果您有一个具有原型继承的更复杂的项目，您仍然可以创建一个在对象的构造函数中绑定“this”的缓存函数

var Game = function () {
    this.counter = 0;
    this.loopBound = this.loop.bind(this);
    this.loopBound();
}
Game.prototype.loop = function () {
    console.log(this.counter++); 
    requestAnimationFrame(this.loopBound);
}
var gameOne = new Game();

。
http://jsfiddle.net/3t9pboe8/ （在控制台中查看）

Answer 4

怎么样：

Display.prototype.draw = function(){
  this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  //Animation stuff here.

  window.webkitRequestAnimationFrame( $.proxy(function() {this.draw()}, this) );
};

...假设你使用 jquery

Answer 5

除了 bind 方法和箭头函数解决方案（由 Jamaes World 的答案提供）之外，另一个（相当旧的）解决方法可能是：

var self = this
window.webkitRequestAnimationFrame(
    function() {
        self.draw()
    }
);

Answer 6

你不必使用“这个”。
保持简单。

var game = {
      canvas:null,
      context:null,

    init:function(){
            // init canvas, context, etc
    },      

    update:function(){
        //do something
        game.render();                        
        requestAnimationFrame(game.update, game.canvas);        
    },            
};

Answer 7

而且您可能想使用 requestAnimationFrame shim 使其在所有浏览器上运行 https://github.com/kof /动画框架