Returned event object overwriting parent object - javascript, easeljs

Question

I am using easeljs for a HTML5 game.

I am calling onClick from within a method in a class, but the event object is overwriting my 'this' object so I can no longer access the other class methods or vars. For example I have something like (obviously this is not the actual code, just a quick illustration):

function Book(){

  this.text = "this is the text";

  this.makeText = function(){
            //Define some shapes
            var character = new Container();
            character.addChild(some shapes);
            character.onClick = this.detectClick;
  }

  this.detectClick = function(){
           alert(this.text);
  }
}

So, if I run this, I would get an undefined alert because in my detectClick method, this is now my event object.

So how do I call the original text from within this method?

Many Thanks

score 3 · Answer 1 · answered Nov 30 '12 at 10:03

3

You need to us closure to pass the object reference

 var self = this;
 character.onClick = function(){ self.detectClick() };

answered Nov 30 '12 at 10:03

nxtwrld

1,942
14
15

score 0 · Answer 2 · answered Dec 01 '12 at 20:31

0

Or use a simple proxy method.

function proxy(method, scope) {
    return function() {
        return method.apply(scope, params);
    }
}
character.onclick = proxy(detectClick, this);

answered Dec 01 '12 at 20:31

Lanny

11,244
1
22
30

score 0 · Answer 3 · answered Dec 25 '12 at 20:30

Ok that you really need to do is

function Book(){

  this.text = "this is the text";

  this.makeText = function(){
            //Define some shapes
            var character = new Container();
            character.addChild(some shapes);
            character.onClick = this.detectClick.bind(this);
  }

  this.detectClick = function(){
           alert(this.text);
  }
}

score 0 · Answer 4 · answered Jul 26 '13 at 12:30

scope of 'this' is the problem in your code. Change your code like the below code

 function Book(){

  this.text = "this is the text";
  var that=this;
  this.makeText = function(){
        //Define some shapes
        var character = new Container();
        character.addChild(some shapes);
        character.onClick = that.detectClick;
 }

 this.detectClick = function(){
       alert(this.text);
 }
}

Returned event object overwriting parent object - javascript, easeljs

4 Answers4