Function Prototype Chain and Binding this

Learning computer programming has taught me that there are many solutions to the same problem. One of those problems being how to invoke functions and assign the this parameter while doing so. JavaScript fortunately has a Function prototype chain that includes three methods that can help us accomplish just that. The apply, call, and bind methods in the Function prototype chain can help us tell JavaScript what ‘this’ is. They do have some minor differences during run time and in their syntax.

There are two similarities between all these methods. The first being that when invoked we want to place the method after a function reference by using dot notation. The second being that the first parameter in these method invocations is always going to be what we want this to be and the rest are parameters that are going to be passed into the function we are invoking. Let us imagine that we have a function that multiplies two numbers, like so:

This function has two parameters a and b which then get multiplied and returned. Let’s use these methods to invoke multiply.

The apply method would be invoked like this:

The apply method was placed behind the reference to multiply using dot notation. Then the keyword this ( which currently is pointing to the global object ) is placed as the first parameter in the invocation. So far so good, now with the apply method we do something a little different that what we do with the other methods. We place the parameters that are going to be used to invoke the function in an array-like object. The apply method gets invoked immediately after which then runs the function immediately as well.

Note: The best way to remember the syntax for the apply method is to think “ If it starts with an a, it needs and array”.

The bind method is invoked like this:

The syntax for this method is similar to apply but instead of putting the parameters that are going to be passed onto the function in an array-like object. We place them in there comma separated instead. This method does not invoke the function immediately after it is declaration. Instead it just binds this to the object and returns a function reference. In order to invoke the method the bindMethod variable must be invoked.

Notice that this invocation does not need parameters. This is because when we bound this to the function multiply we already gave it those parameters. Bind also binds those parameters to this certain function declaration so that it can be recalled later.

The call method is very similar to the apply method:

Invoked the same way (after a function reference) with the first parameter being the object we want to bind this to and after that the parameters. The syntax for the call method does not need an array-like object to define what the parameters are, instead we comma separate them. This method also invokes the function with the given parameters immediately upon declaration just like apply does.

If this still confuses you that’s alright. We can see the differences better using objects as an example. Let us imagine that we have two Person object and a function called personInfo that displays the persons name, age, and hobby as a string. Just for fun lets throw in three global variables that hold name, age, and hobby.

We use this a lot inside of our personInfo function but what is this referring to? Let’s try it out!

It seems to be that when the personInfo function is invoked without apply, call, or bind ‘this’ refers to the global scope where the three variables outside of person objects reside.

Lets try using apply:

We referenced the function we are trying to use, we placed the object we want the keyword ‘this’ to refer to, and (for the purpose of this explanation) we added an empty array because the function we are invoking does not ask for any parameters and because we are using the apply method. This can be omitted if the array of parameters is not needed. The apply method bound this to the person object marco. This allows the function personInfo to use the keyword ‘this’ to refer to marco as an object. It changes what ‘this’ points to, only for the invocation time of the function. Once the function dies, ‘this’ no longer points to marco.

I encourage you to try out the other two methods on your own, create a new function that takes in parameters to try these three methods on . Remember that bind does not immediately invoke the function. Instead declare a variable to hold the function reference that bind will return and run that variable as a function.

Related posts:

Rolling into the third week as an intern at the Peggy Guggenheim Collection, I was preparing materials for the upcoming talk on the Picasso exhibition (Picasso On the Beach). It was a point during my…