This is the fifth article of a series that I am doing that focuses on learning what this really is in JS.

In Javascript, what this will bind to depends on the call-site of the function in which this is present.

When you are at call-site of that function, you will have to apply one of the 4 rules that we will be exploring in a minute, which determine what this will bind to.

Also, keep in mind that multiple rules can apply at the call-site. So, after we discuss what those 4 rules are, we will discuss what their order of precedence is, in order to correctly determine the binding of this keyword in JavaScript.

Note: There are cases where none of these 4 rules apply i.e. these rules have some exceptions too.

Now let’s explore what those 4 rules are in detail.

4 Rules that determine ‘this’ binding in JS

Rule #1 : Default Binding

Let’s talk about the easiest one first. Default binding rule applies when you:

Go to the call-site of the function in which this is used, and find that the function is invoked directly i.e. like this : functionName(); .

In this case, this will bind to the global object.

This is illustrated in the following example:

Exception to Rule 1: If the function in which this is present is running in strict mode then this will not bind to global object and will equate to undefined . For example:

Also note that this exception doesn’t apply to the call-site of the function in which this is present i.e. if function in which this is present is running in non-strict mode and the place at which that function is called is in strict mode then this will bind to global object and will not be undefined .

Rule #2 : Implicit Binding

Implicit binding rule applies when you:

Go to the call-site of the function in which this is used, and find that the function is invoked with an object reference using dot notation i.e. like this : objectName.functionName(); .

In this case, this will bind to the object that is present immediately to the left of the dot in function invocation.

This is illustrated in the following example:

Rule #3 : Explicit Binding

Explicit binding rule applies when you:

Go to the call-site of the function in which this is used, and find that the function is invoked using .call or .apply i.e.

either like this : functionName.call( objectName );

or like this : functionName.apply( objectName ); .

In this case, this will bind to the object passed to .call(..) or .apply(..) .

This is illustrated in the following example:

Using .call(..) for explicit binding of `this`

Using .apply(..) for explicit binding of `this`

To learn more about explicit binding of this refer: JavaScript: using .call(..) and .apply(..) in ‘this’ binding.

Rule #4 : new Binding

In order to understand new binding better first refer: JavaScript: so what is a CONSTRUCTOR anyway?

So, new binding rule applies when you:

Go to the call-site of the function in which this is used, and find that the function is invoked with a new in front of it i.e. like this : new functionName(); .

In this case, this will bind to the new object that was created when we added new in front of the function at it’s call-site.

This is illustrated in the following example:

— That’s it! These are the 4 rules that determine what this will bind to! —

However, multiple rules can apply at the call-site of the function in which this is present. So, let’s now discuss what their order of precedence is, in order to correctly determine the binding of this keyword in JavaScript.

Order of Precedence of the 4 Rules that determine ‘this’ binding in JS

The 4 rules along with their order of precedence are as follows:

new binding

If the function is invoked like this: new functionName(); then apply new binding rule, else move on to the next rule.

2. Explicit binding

If the function is invoked either like this : functionName.call( objectName );

or like this : functionName.apply( objectName ) then apply explicit binding rule, else move on to the next rule.

3. Implicit binding

If the function is invoked like this: objectName.functionName(); then apply implicit binding rule, else move on to the next rule.

4. Default binding

If none of the above rules apply, simply apply default binding rule. In this case, the function is invoked like this : functionName();

Thus, it can be said that determining this binding correctly boils down to correctly applying these 4 rules at the call-site of the function in which this is present . However, these rules have some exceptions too.

Closing Comments:

I am doing a whole series on Javascript: Learn ‘this’. If you are interested in previous articles of this series then you can refer to:

Thanks for reading. :-)