对象文字JavaScript模式无法识别对象变量

Question

I am trying to create a javascript game using sockets, but I'm getting stuck at the OOP of my objects. I am having a problem referencing an object's variables from inside the object's function.

There could be several problems here. I am calling the draw function from within the object and not a render function. I am also not sure if the object literal design is done correctly.

Using Require.js and class.js, we have 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;})

extending from 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;

    },

User.draw(ctx) is called in game.js :

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

This.posx and this.posy are not recognized in user.draw(). When they are replaced with hard values, it works fine. What am i missing?

My complete code is a little more confusing, but you can find it at https://github.com/mtbarta/canvas/blob/master/public/javascripts/client.js

Thanks!

Answer 1

The problem is that you're trying to use this in the "load" handler, where the value will not be what it is in the "draw" function. Try this:

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

By preserving a copy of this in the local variable "entity", the handler will have access to it.