javascript“this”关键字不是指正确的东西答案

【问题标题】：javascript "this" keyword not referring to correct thingjavascript“this”关键字不是指正确的东西
【发布时间】：2013-07-21 21:55:01
【问题描述】：

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 参数中，有什么办法吗？

【问题讨论】：

也许在你的 onload 函数中定义一个属性self: this 并用self 替换this？
@jonhopkins 在对象文字中分配 self: this 是行不通的。不过，他可以在draw 函数中使用var self = this;。
最后的逗号和缺少};会导致语法错误。
谢谢大家！ @pstanton 这不是 ball 中的最后一个函数。

标签： javascript this

【解决方案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 时的值。后一种解决方案不适用于较旧的浏览器，但很容易被填充。

【讨论】：

【解决方案2】：

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

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

甚至

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

【讨论】：

【解决方案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();

注意：未测试

【讨论】：