
If you have spent some time reading or writing JavaScript, you will have no doubt came across the `this` keyword. In other object orientated languages, the `this` keyword refers to the current instance of the class. In JavaScript the value of this depends on the context of the function and where it is called.Not knowing this or rather `this` can be confusing.
JavaScript functions get two arguments passed silently `arguments` and `this`, the second being the more widely used of these implicit arguments.
In this post I'm going to be looking at `this` in four different situations:
* In a regular function.
* When a function is called as a method.
* In a function that's being called as a constructor.
* When you explicitly set the value of `this` manually using `bind`, `apply`, or `call`.
Let's get started...
#### In a regular function

[View on JSFiddle](https://jsfiddle.net/harps116/d9zpz8dx/)
In a regular function ( or anywhere outside of a function ) when in _non strict mode_`this` refers to the window object, or the root of the [DOM](https://en.wikipedia.org/wiki/Document_Object_Model). In _strict mode_ i.e.. when `"use strict";` is at the top of the JavaScript file, `this` is undefined, which is probably more desirable and will reduce any unwanted side effects.
#### When a function is called as a method

[View on JSFiddle](https://jsfiddle.net/harps116/o5y9oLyu/7/)
`this` inside of an object refers to the object on which the method is being called on. In the above example this refers to the anObject..object. Gordon Zhu founder of [Watch and Code](https://watchandcode.com/p/practical-javascript), uses the term "the left of the dot rule", which I think is a great way to identifying what `this` will refer to.
For example if we had something that looked like `object.innerObject.oneMoreObj.doSomething()` using the "left of the dot rule", We can quickly see that doSomething is a method of the oneMoreObj object.
#### In a function that's being called as a constructor

[View on JSFiddle](https://jsfiddle.net/harps116/tzt2ys7x/8/)
In a function that's being used as a constructor, `this` points object that has been created from the constructor.
#### When you explicitly set the value of `this` manually using `bind`, `apply`, or `call`.


[View on JSFiddle](https://jsfiddle.net/harps116/m7k88ujv/1)
Bind sets the 'this' of the function, call and apply execute the function and set the `this`. Call and apply are very similar except apply takes arguments as an array and call takes its arguments as a comma separated list. I look at the first letter to remember the difference, apply: array, call: commas. It is worth noting once bind is set, it is bound once and cannot be changed.
The most important thing to remember when trying to figure out what `this` equals is the context in which the function is being called.
That was `this`.
Thanks for reading!
Some additional resources:
* [Watch and Code: Practical JavaScript](https://watchandcode.com/p/practical-javascript)
* [This on Stack Overflow](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work)