對象文字JavaScript模式無法識別對象變量

Question

我正在嘗試使用套接字創建一個JavaScript游戲，但是我陷入了對象的OOP問題。 我在從對象的函數內部引用對象的變量時遇到問題。

這里可能有幾個問題。 我正在從對象內部調用draw函數，而不是從render函數調用。 我也不確定對象文字設計是否正確完成。

使用Require.js和class.js，我們有了User.js：

    define(['entity'],function(Entity){
var User = Entity.extend({
    init: function(){
        this.health= 10;

    },

    draw: function(ctx){
        img = new Image();   // Create new img element
        img.onload = function(){
        // execute drawImage statements here
        ctx.drawImage(img, this.posx, this.posy);
        };
        img.src = '/images/object.PNG'; // Set source path
    }
})
return User;})

從Entity.js擴展

    define(function(){
var Entity= Class.extend({
    init: function(){
        //object image
        this.img.src = '/images/Blue-soldier.PNG';
        //location
        this.posx=50;
        this.posy=50;
        //gameplay values
        this.health=1;
        this.speed=0;

    },

在game.js中調用User.draw（ctx）：

    var entity = new User;
    this.users.push(entityid);
    entity.draw(ctx);
},

在user.draw（）中無法識別this.posx和this.posy。 當用硬值替換它們時，它可以正常工作。 我想念什么？

我的完整代碼有些混亂，但是您可以在https://github.com/mtbarta/canvas/blob/master/public/javascripts/client.js上找到它

謝謝！

Answer 1

問題是您試圖在“加載”處理程序中使用this ，該值將不是“繪制”函數中的值。 嘗試這個：

    var entity = this;
    img.onload = function(){
      // execute drawImage statements here
      ctx.drawImage(img, entity.posx, entity.posy);
    };

通過保存的副本this局部變量“實體”，該處理器將有機會獲得它。