Context Binding Functions

I realized this week that I have never dedicated an article to context (scope) binding functions in JavaScript and thought I would remedy that today. JavaScript context binding functions are functions that guarantee the execution context of a callback function, allowing the developer to control what this is set to.

How do it…

We’ll look at two types of binding functions. The first, seamlessly wraps an inner callback function with a provided context, so the arguments are passed directly through inner function to bound function:

function bind(fn, ctx) {
    return function() {
        return fn.apply(ctx, arguments);

Here is how to use bind:

el.onclick = bind(function(e) {
    // this === oTargetContext, not el
    // like normal, the only argument will be the event
}, oTargetContext);

The second type allows extra parameters to be provided at the time of binding, so when the wrapped function is called, its signature will be modified:

function bind_extra(fn, ctx, oOtherData) {
    return function() {
        return, arguments, oOtherData);

Here is how to use bind_extra:

el.onclick = bind_extra(function(aArgs, oOtherData) {
    // this === oTargetContext, not el
    // the normal arguments are passed as argument 1, so aArgs[0] is the event
    // oOtherData === oMoreData
}, oTargetContext, oMoreData);

How it works…

In both examples the binding function takes several arguments and returns a new inner function. The returned function creates a closure around the arguments passed to the binding function, which is used to adjust the scope when the inner function executes. Because the inner function is returned when the binding function executes, it is the inner (anonymous in this case) function that is actually applied to onclick. Thus when the click handler executes, the inner function is called and passed the event as its only argument.

The first seamless binding function simply applies the arguments passed to it directly to the original function that was bound. In this case .apply(desiredContext, arrayOfArguments) is used to adjust the context, whilst passing the arguments exactly as it received them. The bound function signature does not need to change.

The second binding function explicitly passes the arguments array to the original, bound function as argument 1 and the extra data as argument 2. Since the arguments are enumerated .call(desiredContext, argument1, argument2) is used to adjust the context and pass the necessary arguments. The bound function signature will need to change to expect the arguments provided by the extra binding function.

I see the binding pattern used most often in conjunction with prototypal objects, where the event, ajax, or timeout callback functions are attached to the prototype object and for code clarity, this should always refer to the current instance, but there are other uses.

In my experience, I try to avoid functions like bind_extra, because they tend to complicate code dependencies and confuse the next person to look at the code.