Giving a function within a class method of a PrototypeJS Class access to class members

Question

Let's say I have a very simple PrototypeJS class that looks like this:

var Foo = Class.create({
  initialize:  function() {
    this.bar = 'bar';
  },

  dostuff:  function() {
    $$('.enabled').each( function(elem) {
      alert(this.bar);  //FAIL
    });
  }
});

This fails because the function being passed to .each() doesn't have any idea what this refers to.

How can I access the bar attribute of the Class from inside that function?

Answer 1

Try:

dostuff:  function() {
   var that = this;

   $$('.enabled').each( function(elem) {
        alert(that.bar);  //FTW
   });
}

Or, pass a context to each():

dostuff:  function() {
   $$('.enabled').each( function(elem) {
        alert(this.bar);  //FTW
   }, this); // Context
}

Answer 2

Hmmm, I'm no Protoype expert, but I think this might help answer your question - http://www.duncangunn.me.uk/dasblog/2009/05/26/ObjectorientedEventHandlingInJavascript.aspx

Let me know if it does, if it doesn't, apologies for wasting your time!

Answer 3

When you're inside the each(), this refers to what's being iterated with each. If there's only one instance of the class, replace all this's with Foo.

var Foo = Class.create({
bar : "bar",

  dostuff:  function() {
    $$('.enabled').each( function(elem) {
      alert(Foo.bar);  //FAIL
    });
  }
});

if you can't get away with alert(bar);

Answer 4

You can use Prototype's bind function, which 'locks [the function's] execution scope to an object'.

var Foo = Class.create({
  initialize:  function() {
    this.bar = 'bar';
  },

  dostuff:  function() {
    $$('.enabled').each( function(elem) {
      alert(this.bar);
    }.bind(this)); // Set the execution scope to Foo
  }
});

Answer 5

Hi I have a javascript class like following:

Calendar = Class.create();
Object.extend(Calendar.prototype, {

refreshCalendar: function(k){ k = "z"; },

getButtonCode: function( k){
return "button class='button' onClick='oCalendar.refreshCalendar(\"" + k +"/button";
},

});//end of calendar class..

var oCalendar = new Calendar();//creating instance

//

This works fine as I have created an instance of calendar class, 'oCalendar'. Now is there any way so that I can access the method refreshCalendar in onClick event even if I dont create an instance of calendar class.

onClick='refreshCalendar(\"" + k +"/button"; or something similar that doesnt require calling the global instance oCalendar.

Thanks