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 を作成できる) 、ball3 など)。ネストされた関数にあるため、「これ」はもうボールを参照していないと思いますか? ball.x と ball.y を drawImage 引数にハードコーディングせずにそれを回避する方法はありますか?

4

3 に答える 3

2

これは JavaScript の難しい点の 1 つです: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 に答える