Question

What’s the difference between these two functions?

function bind_1(f, o) {
    if (f.bind)
        return f.bind(o);
    else
        return function() { return f.apply(o. arguments); };
}

function bind_2(f, o) {
    if (f.bind)
        return f.bind(o);
    else
        return f.apply(o. arguments);
}

Answer 1

Vadim and Corbin are both mostly correct, but to add a little specificity and verbosity (I speak big words), bind_1 returns a function that will always call the given function (f) with the given arguments (o) set as the context – setting the context means that inside the function the this keyword will refer to the assigned context object. Whereas bind_2 will return either: the function (f) with the context (o), or return the result of calling the function (f) with the context (o).

Function.prototype.bind can also be used for partial function application. For instance, if you don’t care to use the context inside a function you can provide functions with arguments already applied and therefore simplify subsequent calls:

// define a function which expects three arguments
function doSomething (person, action, message) {
    return person + " " + action + " " + message + ".";
}

var shortcut = doSomething.bind(null, "Joshua", "says");
// the call to bind here returns a function based on doSomething with some changes:
// 1. the context (_this_) is set to null
// 2. the arguments (person and action) are defined ("Joshua" and "says") and not changeable

// now we can use shortcut("Hello")
// instead of doSomething("Joshua", "says", "Hello")
shortcut("Hello"); // returns "Joshua says Hello."

The first argument passed to .apply(), .call(), or .bind() is changing the context of the function/method. The context is the value of the this keyword; thus, inside of the function the this value will be whatever is passed as the first argument. Here I was using null because in this case the function doesn’t need a specific value for the context; and null is fewer characters than undefined, and feels better than some garbage value (“” – empty string, {} – empty object, etc.). So the remaining two variables are assigned as the first set of arguments to the function.

function exampleContext () {
    return this; // context of function execution
}

exampleContext(); // returns the global scope "window" (in the browser)

var exampleBind = exampleContext.bind(null);
exampleBind(); // returns "null"

var exampleBind = exampleContext.bind("Joshua");
exampleBind(); // returns "Joshua"

var exampleBind = exampleContext.bind({});
exampleBind(); // returns "Object {}""