Reference Object calling function in Javascript

Question

I have a makeshift events system in JS and the attacher looks like this:

events.attach(events.NEW_TASK,this.update);

Where this.update is a callback/handler/function. The problem is, when the dispatcher tries to call this handler, it loses it's original context. How can I bind the handler with the context of the object that calls the attach function without passing this as an argument and using that?

Edit: I should also mention that it will be somewhat of a framework so it has to be simple for other developers so preferably not needing to store the context in another variable.

Community · Accepted Answer · 2017-05-23 10:27:38Z

2

Another option, using the Function.prototype.bind method, part of the new ECMAScript Standard:

events.attach(events.NEW_TASK, this.update.bind(this));

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered May 25, 2010 at 6:20

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

5 Comments

Tim Down Over a year ago

... which is all very well but not usable as a general solution. Yet.

Christian C. Salvadó Over a year ago

@Tim, an almost standard compliant implementation is really simple to write (~8 lines in the answer I link), and we will have native implementations soon in major JS engines ( WebKit, Mozilla, V8). I'm sure that this will be the most used method in the near years to come, there is no reason to not use the standard way...

Tim Down Over a year ago

Well, I pretty much agree with you. My answer avoids extending Function.prototype because I prefer not to extend native prototypes and because I prefer not to have two separate branches for different browsers where possible.

Christian C. Salvadó Over a year ago

@Tim, yes, I'm also against to extending native prototypes with non-standard methods, IMHO in this case (and for example the ES5 Array.prototype additions also) I see no problem extending it for compatibility, because I know that native implementations will come soon or later. The difference between the branches will be that in browsers with native implementations, the methods will be ultra-fast, compared to what you can achieve with a custom implementation...

Tim Down Over a year ago

Yes, I appreciate the benefits you mention. To be honest, I'm not dogmatically opposed to extending Function.prototype and Array.prototype. I'm just wary of other scripts in the page that might have had the same idea and done it wrong.

Tim Down · Accepted Answer · 2010-05-25 08:37:36Z

1

Until ECMAScript 5 has wide adoption in browsers, you could use your own implementation of Function.prototype.bind:

function bind(func, thisObj) {
    return function() {
        func.apply(thisObj, arguments);
    };
}

events.attach(events.NEW_TASK, bind(this.update, this));

edited May 25, 2010 at 8:37

answered May 25, 2010 at 8:28

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Comments

Kunal · Accepted Answer · 2010-05-25 06:15:54Z

0

You could store the reference of "this" in a local variable and try calling the function using it

var that = this;

events.attach( events.NEW_TASK, function( ) { that.update(); } );

answered May 25, 2010 at 6:15

Kunal

3622 silver badges8 bronze badges

Collectives™ on Stack Overflow

Reference Object calling function in Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related