How to pass arguments to a function within an object literal

Question

I have a lot of my code inside an object literal and there are a couple functions where I want to be able to pass the functions arguments for the parameters but I can't figure out how to do that.

Here is an example of my object..

var test = {
    button: $('.button'),
    init: function() {
        test.button.on('click', this.doSomething);
    },
    doSomething: function(event, param1, param2) {
        console.log(param1);
        console.log(param2);
    }
};

So when the button is clicked and it calls the function doSomething I want to pass in arguments for param1 and param2.

Something similar to this maybe, but this does not work.

test.button.on('click', this.doSomething('click', 'arg1', 'arg2'));

Any ideas, or am I going about this the wrong way?

Answer 1

The jQuery.proxy() function seems to be exactly what you need. Have a good read at the docs and see if they make sense to you. For your specific example,

var test = {
    button: $('.button'),
    init: function() {
        test.button.on('click', $.proxy(this.doSomething, null, 'arg1', 'arg2');
    },
    doSomething: function(param1, param2, event) {
        console.log(param1);
        console.log(param2);
    }
};

In this example, the parameters to $.proxy are:

• this.doSomething - The the function to call
• null - The context in which the function will be called. By supplying null, we are saying to use its 'normal' context.
• arg1 - The value of param1 formal parameter of the called function
• arg2 - The value of param2 formal parameter of the called function

Since the click callback supplied the final parameter (event), that is already provided and doesn't need to be additionally or explicitly declared. The jQuery.proxy() when passed additional parameters passes those at the front of the formal parameter list and any remaining parameters implicitly supplied are passed at the end. So if we a function that looks like:

var f = function(a, b, c) {
    console.log(a, b, c);
};

and invoke it through a proxy:

var p = $.proxy(f, null, 2, 3);
p(1);

The value of a, b and c that are logged will be 2,3,1.

This question is also extremely close to this one.

How can I pass arguments to event handlers in jQuery?