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?

@TysonWolker That solution is nice and elegant but assumes that one is able to modify the doSomething function to use it in this fashion. What if the target function is already speced out or coded to accept three parameters and we want to keep that notion? — Kolban, Nov 07 '14 at 01:04

score 3 · Accepted Answer · edited May 23 '17 at 11:58

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?

Cannot find its explanation in documentation. I'm sure it will not work. — zerkms, Nov 07 '14 at 01:06
@zerkms Can you clarify the comment? Did the link to jQuery.proxy() not work? Is there something that we can discuss further about its documentation? — Kolban, Nov 07 '14 at 01:07
I'm sure the proposed solution does not implement the right partial application. See http://jsfiddle.net/qwwc1qwj/ — zerkms, Nov 07 '14 at 01:07
@zerkms Awesome. Great catch. I got the order of the parameters wrong and have updated the answer. MANY thanks my friend. +1 — Kolban, Nov 07 '14 at 01:17
it would be nice if jquery supported right partial application like lodash does: https://lodash.com/docs#partialRight — zerkms, Nov 07 '14 at 01:24

How to pass arguments to a function within an object literal

1 Answers1