One confusing thing about JavaScript is how the meaning of 'this' changes based on execution context. In this post I will demonstrate how to use bind() to inject the meaning of 'this' in functions where it's referenced directly.
Throughout the post I will be using the following example
print() creates a simple report and calculateCommission() accumulates someone's commission.
Common to both functions is the assumption that 'this' refers to an object with certain properties. At first glance this restriction may seem to severely limit the flexibility of these functions. The fact that the properties, commission and inventory, are hardwired into the functions may seem like a bad idea, but it turns out that using bind() lets us inject and control the meaning of 'this' to make it more flexible.
In the following code sample I will demonstrate how we can reuse both functions for both a computer store and a car store.
As you can tell from the code above, bind() enables us to pass in an object that controls the meaning of 'this'. As a result the same function can be used to print a report for completely different implementations. The first argument passed defines the meaning of 'this' and any additional arguments serve as regular function arguments.
Not only can we control the meaning of 'this', but we can also pre-set additional input parameters, and pass in others. This concept is often referred to as currying. When calculating the car store commission I am pre-setting all the parameters – including the commission. However, for the computer store I am making the commission an argument per sale.
How does this magic work? Under the covers bind() returns a new function, identical to the original, except it changes the meaning of 'this' based on the first argument.