In this chapter, we are going to represent the function binding: a method creating a new function that, when called, has its this keyword set to the provided value.
Now, imagine that you pass object methods as callbacks, for example, to setTimeout, and there exists a known issue: losing this.
Let’s see how to fix it.
Losing “this”
You have already got acquainted with the examples of losing this. If a method is passed separately from the object, then this is lost.
In the example below, it is shown what can happen with setTimeout:

The output doesn’t show “W3Docs” as this.siteName. It shows it as undefined. The reason is that setTimeout received the function site.welcome, distinctly from the object. So, you may rewrite the last line, as follows:
let f = site.welcome;
setTimeout(f, 1000); // lost site context
The First Solution: a Wrapper
The most natural solution is to use a wrapper, like this:

It operates as it gets the site from the external lexical environment, then calls the method regularly.
Here is a shorter option:
setTimeout(() => site.welcome(), 1000); // Welcome to W3Docs!
In this case, a slight vulnerability may appear in your code structure. And, if the setTimeout triggers site changes value, it can call the wrong object. Look at the following example, carefully:

The Second Solution: Bind
This solution guarantees that the problem mentioned above will not occur.
Functions provide a built-in method bind, allowing to fix this.
You can use the following basic syntax:
// more complex syntax will appear a bit later
let bindingFn = fn.bind(context);
The result of func.bind(context) is a unique function-like object, callable as function. It transparently passes the call to func setting this=context .
For instance:

All the arguments are passed to the initial func “as is.”
For example:

Another example uses an object method, as follows:

In the (*) line, the method site.welcome is taken binding it to the site. The welcome belongs to bound functions.
In the example below, you can notice that arguments are passed “as is”, and only this is fixed by bind .
For instance:

Partial Functions
It is possible to bind not only this but also arguments. Developers use it rarely, but at times, it can be useful.
Here is the full syntax:
let bound = func.bind(context, [arg1], [arg2], ...);
It allows binding context as this and starting function arguments.
For example, here is a multiplication function sum(a, b):
function sum(a, b) {
return a + b;
}
You can use bind for creating a function twoSum:

The sum.bind(null, 2) call initiates a new function twoSum, which passes calls to sum and fixes null as the context and 2 as the first argument. Upcoming arguments are passed “as is.”
In the example below, the value is tripled by the threeSum function:

The benefit of making a partial function is that you can create an independent function using a readable name. You can use it not providing the first argument anytime it’s fixed with bind.