A lot of developers have not known about the very different Object Oriented Programming techniques of Javascript. A lot of them stumble upon it or have transpilers to autogenerate javascript code from modern javascript framework. In this article, let’s try to decode “this” in a unique way.
What is the “this” keyword? A common answer is it is defined
as the current context. It is commonly known that “this” keyword has been used
for the longest time since C++ while defining properties and functions in
classes.
I have a slightly different perception about “this” here. I
shall be using the following diagram to give it an analogy of the active
application workspace given to a process on the RAM.
Here, I am trying to use this analogy for browsers that
interpret and execute Javascript and HTML applications. I’m sure this analogy
will help you understand “this” better.
In the above diagram, I’m using the outer box to denote the
Browser’s active memory (very synonymous to the RAM on desktops). When we load our
Web application which essentially renders to having
HTML, Javascript, CSS on the client side (the user’s
browser).
Take the example of the following code. Let’s relate it to
the diagram in the box MyClientApp. The following code uses the “this” keyword
at different levels.
1. It
uses it for GlobalPrefix, myClass
2. It uses it to define the properties and functions inside myClass
Hence, what we can infer from the above example is
1.
“this” is used to indicate the global space in
the application workspace of the browser’s memory
2.
“this” behaves like a public access specifier
when scoped inside a class
3.
“this” is used to indicate the current context
(as per textbooks)
Hope this article clears your perspective on “this” in javascript.
