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.
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.
This should work I believe:
objects[0] = {
name : "Object 1",
funcs : [
func1,
func2,
function() { return func3(5); }
]
};
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.