Question

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），ball3等）。我认为“这个”不再是指球，因为它在嵌套函数中？如果没有将ball.x和ball.y硬编码到drawImage参数中，有没有办法呢？

Answer 1

这是关于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函数中onload的值绑定到调用draw时的值。后一种解决方案不适用于旧版浏览器，但它很容易填充。

Answer 2

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

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

甚至

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

Answer 3

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();

注意：未经测试

javascript“this”关键字不是指正确的事情

3 个答案: