Javascript Function Calls: Regular call vs Call vs Bind Call

Question

My question is simple: I'm passing a function to some other function to be call later (sample callback function), the question is when, why and what is the best practice to do it.

Sample: I have the xxx() function, and I have to pass it, as I show you below in the window.onload event.

What is the best practice and why? There is any performance aspect or why should I choose to use call or bind to call this function

function xxx(text)
{
    var div = document.createElement("div");
    div.innerHTML = text + " - this: " + this.toString();

    document.body.appendChild(div)
}

function callFunction(func)
{
    func("callFunction");
}

function callUsingCall(func)
{
    func.call(this, ["callUsingCall"]);
}

function callUsingBind(func)
{
    func.call(this, ["callUsingCall"]);
}


window.onload = function(){
    callFunction(xxx);

    callUsingCall(xxx);

    callUsingBind(xxx.bind(document));
}

Thank you,

Sebastian P.

Answer 1

I don't think there's any "best" practise.

You use call if the function you're calling cares what this is.

You use bind if you want to ensure that the function can only be called with the specified value of this.

[There's some overhead to both, i.e. at least one depth of function calls / scope]

Otherwise you just call the function.

Simples :)