This post (This binding in JavaScript - 3. Explicit binding) was originally published onSargalias.

In this series we talk aboutthis binding in JavaScript.

This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.

Basically in JavaScript there are 4 modes forthis binding. Make that 5 if we include arrow functions.

In order of lowest priority to highest priority, here they are:

1. Default binding
2. Implicit binding
3. Explicit binding
4. New binding
5. Arrow functions
6. Gotchas and final notes

In this post we'll talk about explicit binding.

How explicit binding works

Explicit binding has even higher precedence than implicit binding.

We use it by using one of the three functionscall,apply orbind, present in function objects.

call,apply andbind explicitly provide the value ofthis.

For example, when callingfoo.call(obj), the value ofthis infoo becomesobj. The first argument passed in.call is the value ofthis you want the function to have.

call,apply andbind do the same thing in essence. They all bind the value ofthis, which they accept as their first argument.

But they have some slight differences.

.call

.call accepts additional arguments that are comma separated. They will be passed to the function call.

For example:foo.call(obj, argument1, argument2) does two things.

1. It makesthis inside the function beobj.
2. It passes arguments to the function as though it was called withfoo(argument1, argument2).

.apply

.apply is very similar, the only difference being that it accepts arguments in an array.

For example:foo.apply(obj, [argument1, argument2]) is how you would call the function usingapply. It does two things.

1. It makesthis inside the function beobj.
2. It passes arguments to the function as though it was called withfoo(argument1, argument2).

.bind

.bind is slightly different. It returns your target function with the correctthis. It doesn't call it immediately.

.bind is also referred to as "hard binding".

For example:

constobj={};functionfoo(){console.log(this);}constfunctionWithBoundThis=foo.bind(obj);// nothing is logged to the consolefunctionWithBoundThis();// now we log obj to the console

It can also accept additional arguments. However that's a side point so I'll have to refer you to the MDN documentation forFunction.prototype.bind().

Precedence

Out of these,.bind has the highest precedence.

For example if you use both.bind first and.call second,.bind is going to win.

For example:

constobjForBind={name:'objForBind'};constobjForCall={name:'objForCall'};functionfoo(){console.log(this);}constboundFunction=foo.bind(objForBind);boundFunction.call(objForCall);// logs objForBind to the console, not objForCall

As mentioned, these methods also have higher precedence than implicit binding.

constobj={foo(){console.log(this);},};obj.foo.call(objForCall);// logs objForCall to the console, not obj

That's the gist for.call,.apply and.bind.