Javascript function pointer with argument as parameter in a function

Question

Not sure if the title is worded correctly, or if there is a better way of saying it, but I think its okay.

At any rate, I understand the following thus far:

a.b("a", "b", "c", foo);

Where "foo" is a function defined elsewhere that takes in no arguments would simply result in the function a.b() running, with the above parameters. The parameter "foo" can then be called inside function a.b() as simply "foo()". In other words, I understand the above call to be using a function pointer as an argument in the function a.b as a parameter.

Okay, now here is what I'm trying to do...

I want to be able to do something similar to the above, except this time I want foo to have a paramater passed in that argument as follows:

a.b("a", "b", "c", foo("bar"));

Now here is the problem. This will literally result in the paramaters "a", "b", "c" and the result of foo("bar") being used. I don't want this. I want foo("bar") to literally be passed in so that in the function a.b which would look like this (as the header):

a.b(first, second, third, fourth);

Could reference and call the fourth parameter as:

fourth();

Even if "fourth" has an argument in it. I can't seem to find a way around this problem, any advice?

Thanks!

Answer 1

Use an anonymous function to wrap your foo call.

a.b("a", "b", "c", function() {return foo("bar");});

---

If you need to retain the this value that would be given, you can invoke it using .call. You can also pass along any arguments given.

a.b("a", "b", "c", function(arg1, arg2) {return foo.call(this, "bar", arg1, arg2);});

---

And of course the function doesn't necessarily need to be anonymous. You can use a named function just as well.

function bar(arg1, arg2) {
    return foo.call(this, "bar", arg1, arg2);
}
a.b("a", "b", "c", bar);

Answer 2

It's really easy to use BIND with function

a.b("a", "b", "c", foo.bind(undefined, "bar"));

So when you call foo() inside your function it already has the first binded argument. You can apply as more argumenst as you wish using bind.

Note that bind allways apply arguments to function and place them first. If you want to apply to the and use this:

    if (!Function.prototype.bindBack) {
    Function.prototype.bindBack = function (_super) {
        if (typeof this !== "function") 
            throw new TypeError("Function.prototype.bindBack - can not by prototyped");

    var additionalArgs = Array.prototype.slice.call(arguments, 1), 
        _this_super = this, 
        _notPrototyped = function () {},
        _ref = function () {
            return _this_super.apply((this instanceof _notPrototyped && _super) ? this : _super, (Array.prototype.slice.call(arguments)).concat(additionalArgs));
        };

    _notPrototyped.prototype = this.prototype;
    _ref.prototype = new _notPrototyped();

    return _ref;
  }
}

function tracer(param1, param2, param3) {
console.log(arguments)
}

function starter(callback) {
callback('starter 01', 'starter 02')
}
// See here!!!
// function starter call 'calback' with just 2 params, to add 3+ params use function.bindBack(undefined, param, param, ...)                
    starter(tracer.bindBack(undefined, 'init value'));

See example http://jsfiddle.net/zafod/YxBf9/2/