Javascript's "This" Keyword Class Context 
Tags: javascript
Published: 2021-10-05 22:00:37

While building my first application with a Rails API I built, and a Javascript frontend, I ran into a lot of trouble figuring out `This`. In this blog post, I will break down `This` from a Class context with examples from my project, and show you how to always find out what `This` is, using Debugger.

### What is`This`? 
`This`is almost like the Ruby Keyword `Self`, but unlike `Self`, `This` can be a lot more fickle. Just like in writing context is import. "this"can refer to many different things based of the sentence written. In Javascript `This` is defined based on where it is being used. 

 

#####Code along with me: 
Create an index.html file, and an index.js file, and add the js file to the HTML file. Then place a `debugger` in an empty javascript file, open your index.html file in your browser and the inspect tool. You should automatically hit your debugger. Then write. `This` in your console.

![Debugger in js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ihpc31a35e7e38whnd.png)

![console in the inspect tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u68rlwpgs8183rh3osb.png)

 `This` is defined as the window object represents an open window in a browser. **Important:  `This` always references an object **


###Class Context:
It's important to remember that a class is an object, and from what we have already learned about `This, `This` within a Class will point to the Class object.

This is a Pets Class I created within it is a class function called constructor *(if you are familiar with ruby constructor is like initializer) 

![class with constructor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cos7mhpt3vu3550nm6qa.png)

This is the value of `This` inside a constructor (using console to type in `This` to get the value). As you can see it's referring to a Pets object, which is an instance of the Pets Class(currently, has no attributes since we didn't pass any in). 

![console image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12d9ktdy8w3obqxxf869.png)

#### What About Static Class Functions?
Here are where things can change. Unlike regular methods within a Class, static methods are not called on an instance of a Class, but on the Class itself ex: Pets.create()

![static function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg9toloilv57biw3znws.png)

As you can see in the image below, `This` is now referring to the Class (Not an Instance of the class)

![static this result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xn8lgmxd3dl8me1jf3e.png)

**Important: It is important to note that `This` can also change based on the way you write your functions. If we were to use arrow functions on our static method `This` would return undefined 

![undefined this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rx0h1bct93loj4qqod4.png)

This is because Arrow functions inherit their `This` from the outer scope rather than their `This` depending on their calling context. So in the example `This` is trying to refer to the static method of create() which is not an Instance of the class object. 

Static Method:- there is no need to create an object in order to use static method. means "instance" or object creation doesn't any sense with "static" as per Java rule  

###Tips and Tricks to Find `This`:
`debugger`,`debugger`, `debugger`!  You cna use debugger jsut about anywhere in you javascript code, this will alwaa you to use the browser console to  check out what `This` is. 

**Example of how to find this for a Javascript event:** 

This is more of an advanced example but was surely helpful in my project.

playGameButton is a DOM element I set in my index.js  for a button I have on my Html file.  I have an event listener for a "click", When the event occurs, an event object is passed to the function, and that object is now. what `This` is equal to. An EventListener is an object that handles an event.  

![event listener](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsr1dl25z1povjv2x6u0.png)

![event console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r875v12y8lda3h0avz9.png)

** For more help please refer to this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this