使用对象和此关键字的window.requestAnimationFrame

Question

我正在使用javascript学习物理引擎的基础知识，并希望将所有引擎和游戏数据保存在一个对象中，但是在递归调用draw函数为场景设置动画时无法使用'this'关键字。 我可以成功调用有效的单独绘制函数，但要实现多个动画对象并不容易

这是一个带有工作台的简单Codepen 。

这是页面

<!doctype html>
<html>

<head>

<style type="text/css">

    #obj{
        width: 50px;
        height: 200px;
        background: red;
        position: absolute;
        left: 100px;
        bottom: 200px;
    }

    #ground{
        width: 100%;
        height: 200px;
        background: #222;
        position: absolute;
        bottom: 0;
        left: 0;
    }

</style>


</head> 

<body>

<div id="content">

<section>
    <button onclick="draw()">draw()</button><br>
    <button onclick="obj.draw()">obj.draw()</button>
</section>

<article>

    <div id="obj"></div>
    <div id="ground"></div>

</article>  

</div> <!-- END CONTENT -->

</body>

<script type="text/javascript">

var obj = {
    // variables
    id: 'obj',
    width: 50,
    height: 200,
    angle: 30,
    speed: 20,
    acceleration: 4/60,
    deceleration: 2/60,
    moving: false,
    jumping: false,
    // Get methods
    x: function(){return parseInt(window.getComputedStyle(document.getElementById(this.id)).left)},
    y: function(){return parseInt(window.getComputedStyle(document.getElementById(this.id)).bottom)},
    // engine methods
    scale_x: function(){return Math.cos((this.angle * Math.PI) / 180)},
    scale_y: function(){return Math.sin((this.angle * Math.PI) / 180)},
    velocity_x: function(){return this.speed * this.scale_x()},
    velocity_y: function(){return this.speed * this.scale_y()},
    cx: function(){return this.x() + this.width},
    cy: function(){return this.y() + this.height},
    // set methods
    setAngle: function(val){this.angle = val},
    setAcceleration: function(val){this.acceleration = val / 60},
    setDeceleration: function(val){this.deceleration = val / 60},
    setSpeed: function(val){this.speed = val},
    setMoving: function(val){this.moving = val},
    setJumping: function(val){this.jumping = val},
    draw: function(){
        document.getElementById(this.id).style.left = (this.speed++) + 'px';
        window.requestAnimationFrame(this.draw);
    }
}

function draw(){
    document.getElementById(obj.id).style.left = (obj.speed++) + 'px';
        window.requestAnimationFrame(draw);
}

</script>   

</html> 

谢谢你的帮助，

安德鲁

Answer 1

观察到您将obj.draw调用为：

<button onclick="obj.draw()

第一次调用obj.draw时，上下文与作为repaint之前的回调函数而被requestAnimationFrame多次调用时的上下文不同。

因此，通过在一个变量，它是回调函数的范围之外保存此尝试。

就像是 ：

var obj = {    
    //...

    draw: function () {
        var sender = this;
        var draw = function () {
            document.getElementById(sender.id).style.left = (sender.speed++) + 'px';
            window.requestAnimationFrame(draw);
        }
        draw();
    }
}

这是一个更新后的演示 。