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参数中,有没有办法呢?
答案 0 :(得分: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
函数中onload
的值绑定到调用draw
时的值。后一种解决方案不适用于旧版浏览器,但它很容易填充。
答案 1 :(得分:0)
是的,基本上你需要使用closure。您需要做的就是通过父级而不是使用它来引用变量,这实际上将引用函数中的img元素。所以只需将代码更改为
ctx.drawImage(img, ball.x, ball.y);
甚至
ctx.drawImage(this, ball.x, ball.y);
答案 2 :(得分: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();
注意:未经测试