views:

7901

answers:

7

I'm having some trouble with plain old JavaScript (no frameworks) in referencing my object in a callback function.

function foo(id) {
    this.dom = document.getElementById(id);
    this.bar = 5;
    var self = this;
    this.dom.addEventListener("click", self.onclick, false);
}

foo.prototype = {
    onclick : function() {
        this.bar = 7;
    }
};

Now when I create a new object (after the DOM has loaded, with a span#test)

var x = new foo('test');

The 'this' inside the onclick function points to the span#test and not the foo object.

How do I get a reference to my foo object inside the onclick function?

+12  A: 

this.dom.addEventListener("click", function(event) {self.onclick(event)}, false);

Sergey Ilinsky
Thanks, but can you explain why I need to create an anonymous function there? Why does that change the binding?
Chris MacDonald
Whenever an event is fired, 'this' refers to the object that invoked the event.
Tom
When you use the form in your question, self.onclick is just an anonymous function which, when handled, works like you had attached it directly to the span. When you wrap it in a closure, self.onclick(event) really does what you want, e.g. uses 'self' from the context defining the closure.
Adam Bellaire
Thanks, that's what I suspected
Chris MacDonald
A: 

this is one of the most confusing points of JS: the 'this' variable means to the most local object... but functions are also objects, so 'this' points there. There are other subtle points, but i don't remember them all.

I usually avoid using 'this', just define a local 'me' variable and use that instead.

Javier
Your statement is completely inaccurate. Both a function's apply() and call() methods allow you to execute a function with 'this' referring to a variable you pass along in the call.
Kenaniah
@Kenaniah:.... thus adding to the confusion, the exact meaning of the code depends on how it's called!
Javier
+17  A: 

(extracted some explanation that was hidden in comments in other answer)

The problem lies in the following line:

this.dom.addEventListener("click", self.onclick, false);

Here, you pass a function object to be used as callback. When the event trigger, the function is called but now it has no association with any object (this).

The problem can be solved by wrapping the function (with it's object reference) in a closure as follows:

this.dom.addEventListener(
  "click",
  function(event) {self.onclick(event)},
  false);

Since the variable self was assigned this when the closure was created, the closure function will remember the value of the self variable when it's called at a later time.

An alternative way to solve this is to make an utility function (and avoid using variables for binding this):

function bind(scope, fn) {
    return function () {
     fn.apply(scope, arguments);
    };
}

The updated code would then look like:

this.dom.addEventListener("click", bind(this, this.onclick), false)
hishadow
The createCallback utility function is handy! thanks.
Balaji Sowmyanarayanan
closure() is probably a better name though.
hishadow
Or bind() or bindMethod().
outis
Nice and short. :)
hishadow
+1  A: 

The explanation is that self.onclick does not mean what you think it means in JavaScript. It actually means the onclick function in the prototype of the object self (without in any way referencing self itself).

JavaScript only has functions and no delegates like C#, so it is not possible to pass a method AND the object it should be applied to as a callback.

The only way to call a method in a callback is to call it yourself inside a callback function. Because JavaScript functions are closures, they are able to access the variables declared in the scope they were created in.

var obj = ...;
function callback(){ return obj.method() };
something.bind(callback);
Vincent Robert
I called the prototype function 'onclick' to easily associate it. I knew it wasn't going to be called automatically by the actual DOM onclick event, which was why I was trying to do the event listeners to bind my object's onclick with the DOM's onclick function.
Chris MacDonald
That was not my point, I understand your onclick function. My point is that there is no difference in JavaScript between self.onclick and foo.prototype.onclick. There is no way in JavaScript to say "this method bound to this object".
Vincent Robert
@Vincent The only way is to use a closure.
dolmen
+1  A: 

I wrote this plugin...

i think it will be useful

jquery.callback

A: 

A good explanation of the problem (I had problems understanding solutions described so far) is available here.

tpk
A: 

If it is still up then take a look at my way on it here

callback definition as event handlers to dom objects

Universal