What is "This" in Javascript - JargonScript

"This" is really simple if you think.

This simply points to an object which is calling the function.

This is a property on Execution Context, We Discussed about call stack in previous post.

There are 4 ways that you'll usually encounter with "This".

1. Implicit Binding.

2. Explicit Binding.

3. New Binding.

4. Window Binding.

Implicit Binding

Look on the left !

We are calling the function with orderBeer object on the left, so the value of "This" will be orderBeer.

As the object was used to call the function, we call this Implicit Binding.

Explicit Binding

Look on the right !

We are calling the function with methods on the right, so the value of "This" will be the value we pass in those methods.

Call, Bind and Apply are used to invoke function with value of "This" passed into them.

When methods are used to call the function, we call this Explicit Binding.

New Binding

Well this is new !

When we invoke constructor functions ( Pattern ) ,The value of "This" is the return value of that constructor function.

This Oreilly article explain it all.

Window Binding

Window Object !

When we invoke function without doing any of the methods above.

Value of "This" ends up being the Window Object as it is the value of "This" in Global Execution Context.

This and Arrow Functions

Bulls Eye.

In Arrow Function, value of "This" is simply the value of this in the closest function which is not defined with arrow function syntax.

If our Arrow Function is not inside any of the normal functions then the value of "This" points to our Window Object.