The JavaScript bind method

The bind method allows an object to borrow a method from another object. It lets us manually set the this keyword for any function call. It returns a new function where the this keyword is bound. Let us look at an example to further understand this method.

Consider the following object:

In the object above, we have a bus company called transline that has a bookings array, transit code and a book function that takes in bus number and passenger name as arguments. If we wanted to book a seat for a passenger, we would call the book function in the transline object as follows:

The following would be the output on the console:

Now let us assume that we have a new bus company called GCoach. We would create a new object with the details of GCoach as follows:

Now let us assume we want to book a seat for a passenger using the book function from the transline object on the gCoach object. Using the bind method, we can call the book function from the transline object in the following way:

The following would be the output on the console:

Let us now assume we want to create bookings for multiple passengers for a specific bus company(gCoach) on a specific bus number(23). We would achieve this in the following way:

In the snippet above, we have passed the first parameter in the book function (busNum), then we later on passed the second argument (passengerName). This technique of passing the first parameter to a function is called partial application, which means part of the arguments of the original function are already set.

The following would be the output on the console:

Let us now look at how we can use the bind method with event listeners.

Let us start by adding a new property to the transline object, by setting the number of buses to 50 (transline.buses = 50), and let us add another new method for adding the number of buses when we click on a button (this.buses++) as follows:

Let us now attach our event handler to this property as follows:

When we click on the button on the webpage, the following is the output on the console:

This is however not the output we were expecting. the output of this.planes is now NaN. The reason for this output is that the this keyword is the button element. This is because, in an event handler function, the this keyword always points to an element on which that handler is attached to. The handler in this case is transline.buyBuses, which is attached to the document.querySelector(“button”) element. Therefore, inside the transline.buyBuses function, the this keyword will point to the button element. That is why the this keyword returns <button class=“myButton”>Button</button>. We however need the this keyword to point to the transline object itself in order to get the output we were expecting.

To fix this problem, we can simply add the bind method as follows:

When we click the button on the webpage, the following will be the output on the console: