javascript problems with passing methods as callbacks

Question

I am trying to access an object's member variables from inside a method that is passed as a callback which is fired during a filereader event.

I have whipped together the code below just to try and convey my point. It appears that 'this' becomes the filereader instead of the object at the point of call. Is there a way to have the finishLoading be able to access the objects variables?

I would like to make sure that the callbacks are tailored to the object, otherwise I would have just defined them as static functions outside the class.

function myClass(newName)
{
    this.name = newName;
    this.m_fileReader = new FileReader();

    this.finishedLoading = 
        function(param1)
        {
            alert(this.name);
        };

    this.m_fileReader.addEventListener('loadend',  
                                       this.callback_finishedLoading, 
                                       false);
}

var instance = new myClass('timmy');
var instance2 = new myClass('joe');

possible duplicate of addEventListener "this"

Felix Kling
– Felix Kling

2013-07-11 20:06:34 +00:00
Commented Jul 11, 2013 at 20:06 — Felix Kling
– Felix Kling, Commented Jul 11, 2013 at 20:06

Alnitak · Accepted Answer · 2013-07-12 07:06:32Z

4

You need the .bind function:

this.m_fileReader.addEventListener('loadend',
    this.callback_finishedLoading.bind(this),
    false);

The .bind function will take the passed parameter, and call the original function with that parameter as its this instead of whatever value the browser tried to supply.

Alternatively, just create your own alias to this and wrap your call in an anonymous function:

var self = this;
this.m_fileReader.addEventListener('loadend', function(ev) { 
    self.callback_finishedLoading(ev)
}, false);

The latter is mostly what .bind does behind the scenes, but does have the advantage that it'll work on pre-ES5 browsers without a shim.

edited Jul 12, 2013 at 7:06

answered Jul 11, 2013 at 20:05

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2437417 Over a year ago

Can't edit your answer because not enough characters, but you have what seem to be a couple copy/paste errors in the second example. The , in the callback, and the ) after the callback.

2 revs user2437417 · Accepted Answer · 2013-07-11 20:29:22Z

You can make your constructor implement the EventListener interface, like this:

function myClass(newName) {
    this.name = newName;
    this.m_fileReader = new FileReader();
    this.m_fileReader.addEventListener('loadend', this, false);
}

myClass.prototype.handleEvent = function(event) {
    return this[event.type] && this[event.type](event)
}

myClass.prototype.loadend = function(event) {
    alert(this.name);
};

var instance = new myClass('timmy');
var instance2 = new myClass('joe');

I renamed the finishedLoading to loadend, and put it on the .prototype of the constructor. Then I added a .handleEvent method to the .prototype.

Finally in the constructor, we don't pass a function at all. Instead just pass the this, which is your myClass instance.

I removed your param1 because it was unclear how that was to be used. If it needs to receive some value from other invocations, then you can create a separate finishedLoading method on the .prototype, and have the .loadend() method invoke it.

aldux · Accepted Answer · 2013-07-11 20:06:47Z

0

this is relative to the context. Every time you open a new block {} it changes to the current block context. Save this to another variable before calling the callback function.

answered Jul 11, 2013 at 20:06

aldux

2,8042 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

javascript problems with passing methods as callbacks

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related