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 isThis?
Thisis 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.
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)
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).
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()
As you can see in the image below, This is now referring to the Class (Not an Instance of the class)
**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
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.
** For more help please refer to this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Top comments (0)