Immediate binding of Javascript object-method for event handling

Question

I would like to use an event handler function as part of a Javascript object. I want to bind "this" inside the event handler to the object it is a method of, since the "this" inside an event handler is usually automatically assigned to the object the event happened on.

This can be done by using an init function for the object in which the binding happens (jsfiddle for tryout):

var myObject = {
    init:function(){
        this.downHandler = this.downHandler.bind(this);
    },
    downHandler:function(){
        alert(this.someInfo);
    },
    someInfo:"hi there"
}      
myObject.init();

I want to avoid this: Redefining it somewhere else decreases code maintainability. So I'm I'm in search for an solution that keeps the process of binding at the method itself.

I tried immediate function execution already, but at the point of immediate execution, the "this" point towards the "window" object (assuming a browser-context). My trials look like this:

var myObject = {
//more code
    downHandler:(function(){
        alert(this.someInfo);
    }).bind(this), //does not work since at the point of immediate execution, the this is assigned to window
//more code
}

Can you think of a way that keeps the binding at the event handling function and not in a separate init-function?

I already got jquery and mootools so I rather would like to avoid additional libraries. — JanD
– JanD, Commented Nov 17, 2012 at 16:15

tkone · Accepted Answer · 2012-11-17 16:19:29Z

2

Since you've already got jQuery loaded use jQuery.proxy

var myObject = {
    downHandler: $.proxy(function(){
       alert(this.someInfo);
    }, this)
};

If you've got Underscore installed (which I prefer for stuff like this), use _.bind

var myObject = {
    downHandler: _.bind(function(){
       alert(this.someInfo);
    }, this
};

MooTools might have something similar as well -- I've never looked into using it.

answered Nov 17, 2012 at 16:19

tkone

22.8k5 gold badges57 silver badges78 bronze badges

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

1 Comment

JanD Over a year ago

the trouble is that it does require an init function as well, since the "this" at the time of initialization points to the global object, not to the object the function is part of. But it goes in the right direction... lets see what I can make out of it :-)

Vyacheslav Voronchuk · Accepted Answer · 2012-11-17 16:21:08Z

0

var myObject = {
    clickHandler: function() {
        alert(myObject.someInfo); 
        //returns undefined without execution of init-function
        //returns "hi there" if init ran. 
    },
    someInfo: "hi there"
}

$('#clickMe').on('click', myObject.clickHandler);

answered Nov 17, 2012 at 16:21

Vyacheslav Voronchuk

2,46321 silver badges17 bronze badges

Comments

Mithlesh Kumar · Accepted Answer · 2012-11-17 16:50:36Z

0

During alert use object name 'myObject' instead of 'this'.

var myObject = {
    downHandler:(function(){
        alert(myObject.someInfo);
    }).bind(this), 
  //when 'this' use it alert undefined
  //when 'myObject' use it alert "hi there"
   someInfo:"hi there" 
}

I hope this will help you.

answered Nov 17, 2012 at 16:50

Mithlesh Kumar

7587 silver badges16 bronze badges

1 Comment

JanD Over a year ago

thank you. The problem is that hard-coding the value this should have takes away the useful characteristics "this" has, e.g. being able to borrow the method etc.

Collectives™ on Stack Overflow

Immediate binding of Javascript object-method for event handling

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related