1 
var ball = {
    x: 20,
    y: 500,
    vx: 100,
    vy: 100,
    width: 13,
    height: 13,
    draw: function() { 
        var img = new Image();  
        img.src = 'images/ball.png';  
        img.onload = function(){  
            ctx.drawImage(img, this.x, this.y);  
        };
    },

我希望 drawImage() 代码行引用 ball.x 和 ball.y。而不是使用ball.x和ball.y，我想使用“this”关键字，这样我就可以将球对象变成一个函数，如果我最终想要的话（能够制作ball1，ball2 ，球3等）。我认为“this”不再是指球，因为它在嵌套函数中？如果没有将 ball.x 和 ball.y 硬编码到 drawImage 参数中，有什么办法吗？

4

3 回答 3

2

这是关于 JavaScript 的一个棘手的问题：this是动态的。简而言之，解决方案是this在拥有它的同时将所需的变量放入变量中，并使用该变量来引用它：

var ball = {
    // ...
    draw: function() {
        // ...
        var myself = this;
        image.onload = function() {
            // use myself rather than this
        };
    }
};

另一种解决方案是固定 的值this。这是使用完成的bind：

var ball = {
    // ...
    draw: function() {
        // ...
        image.onload = function() {
            // ...
        }.bind(this);
    }
};

这会将函数this内部的值绑定到调用时的值。后一种解决方案不适用于较旧的浏览器，但很容易填充。onloaddraw

于 2013-07-21T22:01:40.120 回答
0

是的，基本上你需要使用一个闭包。您需要做的就是通过它们的父级而不是通过使用 this 来引用变量，这实际上将引用函数中的 img 元素。所以只需将您的代码更改为

ctx.drawImage(img, ball.x, ball.y);

甚至

ctx.drawImage(this, ball.x, ball.y);
于 2013-07-21T22:00:21.867 回答
0 
var ball = function(){
    this.x= 20;
    this.y=500;
    this.vx= 100;
    this.vy= 100;
    this.width= 13;
    this.height= 13;
}

ball.prototype = {
    draw: function() { 
       var img = new Image();  
       img.src = 'images/ball.png';  
       var balref = this;
       img.onload = function(){  
           ctx.drawImage(img, balref .x, balref.y);  
       }
}

var myball = new ball();
myball.draw();

注：未测试

于 2013-07-21T22:01:48.260 回答