Question

Im having an issue with using prototypes observe function and gaining access to this pointer. Consider the following:

var Demo = Class.create({
    this.someValue = "this is the value",

    initialize: function() {
        Event.observe("button1", "click", function() {
            alert(this.someValue);
        });

        Event.observe("button2", "click", this.testFunc());
    },

    testFunc: function() {
        alert(this.someValue);
    }
});

Clicking on both the button1 and button2 controls do not perform what I would like which is to have the alert display “this is the value” but instead it displays the source of the event (ie, the button). So my question is how i can achieve what i am after and have the this pointer be equal to the Demo class.

Answer 1

From the manual:

Prototype’s bind function to the rescue. Using bind(), you can make sure your method gets the right this.

In your example:

var Demo = Class.create({

    initialize: function() {
        this.someValue = "this is the value";

        Event.observe("button1", "click", (function() {
            alert(this.someValue);
        }).bind(this));

        Event.observe("button2", "click", this.testFunc.bind(this));
    },

    testFunc: function() {
        alert(this.someValue);
    }
});