如何存储包含参数的JS函数引用

Question

This Stack post shows how to pass an argument to a JavaScript function reference as part of the .on() binding process. I would like to store the argument with the reference , inside an array, inside an object.

---

I have some functions defined at the top of a file:

function func1() {
     $('.result p').text('func1 success');
}
function func2() {
     $('.result p').text('func2 success');
}
function func3(someNum) {
     $('.result p').text('func3 success, someNum is ' + someNum);
}

I have an object later in that same file:

objects[0] = {
    name : "Object 1",
    funcs : [
        func1,
        func2,
        func3// This is where I want to pass an arg, someNum
        ]
};

When a certain event happens, I dynamically create 3 buttons, each bound to one of these 3 functions from the object's array:

// append a button for each func
funcs.forEach(function(thisFunc) {
    $('.buttons').append('<button id="' +
        thisFunc.name + '">Run ' +
        thisFunc.name + '</button>');
    // bind that button to that func
    $('#' + thisFunc.name).click(thisFunc);
});

This all works fine with func1 and func2 but I cannot find any documentation on how to pass an argument in this scenario to a function like func3 . Ideally, I'd like to store it in the array like so:

funcs : [
    func1,
    func2,
    func3(5)
    ]

But that calls the function (you can add the (5) into the Fiddle pasted below to see that in action). I want to bind to the func3 function, with the argument someNum = 5 passed, but only call the function onclick .

Demo:

This Fiddle is a working demo, without the argument being passed to func3 , and that's the part I don't know how to do.

Also, if my problem lies in the way I am binding, dynamically creating the buttons, or storing the references to the functions, please let me know. I am not married to this code structure, this is just the way it seemed proper to build it.

Answer 1

Create a new function using Function.prototype.bind method:

funcs : [
    func1,
    func2,
    func3.bind(null, 5)
]

bind will create a new function with the parameter that will be passes in it.

Another way is to create an anonymous function, check John Bledsoe's answer.

Answer 2

This should work I believe:

objects[0] = {
    name : "Object 1",
    funcs : [
        func1,
        func2,
        function() { return func3(5); }
        ]
};

Answer 3

You can use also both apply and call when binding to the button

func.call(null, 5); '5 is just an example, give whatever param you want

or

func.apply(null, [5]);

By 'binding' i mean onclick="func[3].call(...)" in html or $(someobject).click(function(){ func[3].call(...) }).

A fiddle especially for my good buddy Lye Fish http://jsfiddle.net/d96ev3c8/8/ who's going to argue some more.