Mastering ‘this’ in JavaScript – InApps is an article under the topic Software Development Many of you are most interested in today !! Today, let’s InApps.net learn Mastering ‘this’ in JavaScript – InApps in today’s post !

Read more about Mastering ‘this’ in JavaScript – InApps at Wikipedia

You can find content about Mastering ‘this’ in JavaScript – InApps from the Wikipedia website

One reason the concept of the ‘this’ keyword can be so tricky for a lot of JavaScript programmers — even experienced ones — is because ‘this’ is a slippery little sucker: What ‘this’ refers to depends entirely on context, sometimes in quite perplexing ways.  To make peace with ‘this’ it’s critical to grasp not only how ‘this’ behaves differently in different contexts, but to also understand the contexts themselves — and how to identify them in live code.

Much ink and many tutorial pixels have been spilled over attempts to explain ‘this’. Personally, I have had the most success with the concept of treating ‘this’ as a unique type of variable that changes value depending on the context where it’s used. Variables aren’t so scary, right? We use them all the time. So let’s dig right into ‘this’.

A Bit of Background

In Javascript, functions are objects. Thus, all JavaScript functions have properties and methods, in the same way that objects have properties and methods.

Whenever a function gets executed, it gets assigned its own ‘this’ property—a variable with the value of the object that invokes the function where ‘this’ is used.

In other words, when ‘this’ is used inside a function — let’s call it ourFunction — it acts like a variable that contains the value of the object that invoked ourFunction. Using ‘this’ is more than just a shortcut, though that is certainly a handy aspect. More important is how ‘this’ acts as an identifier: There are times we need this to access methods and properties of the object invoking ourFunction because we don’t always know the name of the invoking object. Sometimes, there is no name to use to refer to the invoking object (like in callbacks, anonymous, or immediately invoked functions).

The invoking object explanation is basically the mirror image of the approach Kyle Simpson takes in book three of his fantastic YDKJS series, THIS & Object Prototypes:

“The most crucial thing to understand is that ‘this’ is not an author-time binding but a runtime binding. Meaning that where ‘this’ points (i.e., in our variable metaphor, the value ‘this’ is assigned to hold) has nothing to do with where a function is declared. Instead, ‘this’ hinges on where the function is called.”

Read More:   The Commander-in-Chief of the Linux Stable Branch – InApps Technology 2022

Simpson explains that a function’s ‘this’ binding is determined by its call site, which is absolutely true. But finding the call site — which involves tracing the frequently complex and confusion-making trail of a call stack — can be tricky. Not to mention time-consuming. As a newbie JavaScript coder, I found it much easier to approach ‘this’ from the other direction, i.e., the object invoking the function.  It’s the same destination, ultimately: the object invoking the function is where the call site will inevitably be found. Period. Since objects are generally much easier to identify, particularly in a large codebase, working from a notion of ‘this’ as a variable pointing to the invoking object made my life much, much easier.

‘this’ is actually a binding that is made when a function is invoked, not when it is declared. What ‘this’ references is determined entirely by the call-site where the function is called.

Default ‘this’

A ‘this’ reference ALWAYS refers to — we can even say holds the value of (cough variable cough) — a singular, unique object. Most often ‘this’ is used inside a function or a method. However, it can also be used outside a function in the global scope.

(Lingo explainer for JavaScript n00bs:  “method” is the name for a function contained within an object. “Callbacks” are anonymous functions passed as an argument into another function. Both are still ultimately just functions, though).

In a regular standalone function — or if you are not in a function at all — ‘this’ still must refer back to some invoking object — yet which one, since there is none apparent? But, yup, even these apparently free-range functions have an invoking object: the window object. As in, the actual browser window containing our code, which is represented by an object called ‘Window’. Check it out:

(Note that in strict mode, ‘this’ will hold the value of undefined in global functions — as it will in anonymous functions that are not bound to any object).

‘this’ In Functions Called As Methods

The easiest and most straightforward context for understanding ‘this’ happens when a method is defined and called on the same object. Remember your object dot notation: you access an object’s properties and methods by typing the name of the object, then the dot operator, then the name of whichever of the object’s properties you’re trying to access. (Again, methods are functions declared on an object as properties of that object, but they’re still just functions).

When a method is invoked in conjunction with its defining object, ‘this’ is super easy to track down: look at whatever initializes the property statement. i.e., sits on the left side of the dot notator:

Read More:   The ‘Kubernetes’ of Frontend Development – InApps 2022

See how it works?  In order to access and invoke ourMethod, we first need to name the object that ourMethod is defined on. That object name, in this context, equals ‘this’. Say it with me: Look for ‘this’ at the left of the dot!

‘this’ In Constructor Functions

Next quick JavaScript review: when a function is being used to create new objects, it is called a constructor function. To call a constructor function, we use the ‘new’ keyword. The giveaway to identifying a constructor function is when the function name starts with a capital letter. That also tells that we need to invoke that particular function using the ‘new’ keyword.

When a constructor function is called, its ‘this’ points to the newly created object, not to the construction function that built it.

Delving a bit into what is happening under the hood helps illustrate why ‘this’ in constructor functions acts as it does. So: whenever a constructor function is called to create a new object, it also, and at the same time, creates a new and matching instance of ‘this’. Simply put, a constructor function’s task is basically just creating a new object with a temporary nickname ‘this’,  and then returning that new object with its own personal ‘this’ assigned to it.

We don’t have to declare ‘this’ because the functionality is built into the ‘new’ keyword — meaning that ‘this’ is automagically created in the background when the constructor function is invoked. The other cool thing that happens is that ‘this’ gets returned along with the new object, also automagically, without us needing to specify a return statement.

To recap: ‘this’ inside of a constructor points to the brand new blank object that the constructor created when invoked. We can then add all the properties — including methods — we like to this swanky new object and get at every single one of them with ‘this’.

Gettin’ Tricky with It

Now things start to get a bit trickier. What happens when we put a function inside the constructor function, and maybe even invoke it?

Here we have our global getThis() function, a constructor function, and a new object created by the constructor function. In this first example are actually calling globally scoped getThis() from inside the constructor function:

getThis() still points to Window, because while it is being invoked inside the Doge() constructor function, the actual getThis() function itself runs in global scope.

However, when we move getThis() inside the Doge constructor function, as a method, its ‘this’ now points to whatever new object is created whenever we run it:

(Above, the console first prints out the new object, dogeSays. Next comes the log statement of getThis() pointing to the new object as its ‘this’, which also points to the new object dogeSays — remember our “left side of the dot” rule???).

Read More:   De-Risk a Technology Startup – InApps 2022

What if we invoke the getThis() method inside the constructor function while we are creating a new object?

getThis() still points to the newly created object. Remember higher up when we talked about the placeholder ‘this’ created when a constructor function is run?  Both of these code samples show that placeholder effect in action.

Our takeaway: for methods nested inside constructor functions, ‘this’ is assigned to the newly created object, even though the call site (invocation context) can vary.

This is Not the End of ‘this’

We aren’t done. At this point, you are ready to tackle reasonably straightforward objects and constructor functions and nab their ‘this’ binding with ease. No sweat, now that you know how to first identify the invoking object, and then track down within it the call site determining ‘this’ binding…and look on the left side of the dot.

However, things do get vastly trickier with callbacks — functions passed as arguments into other functions — and so they are going to get their own ‘this’ tutorial. Don’t despair, fellow pilgrims — we will also be learning how to control ‘this’ by setting it to whatever we want it to be. So when you sing ‘this’ confusion to me, even with callbacks, you’ll have a way to extricate and assign the necessary value, .and get on with your life. See you in two weeks!

List of Keywords users find our article on Google:

in javascript
javascript constructor
$ in javascript
mastering
constructor js
… in javascript
method syntax javascript
this in javascript
function inside function javascript
constructor javascript
constructor function javascript
javascript call function
tricky ink
javascript object values
tricky wikipedia
doge wikipedia
javascript new keyword
ydkjs
bindery machine operator jobs
javascript nested objects
mastering java
javascript constructor function
javascript select value
js constructor
undefined fantastic object
lingo wikipedia
custom ink facebook
no name wikipedia
new keyword in javascript
functions of e commerce wikipedia
this inside function javascript
mastering module e
metaphor keywords
is not a constructor
what is constructor in javascript
yup js
kyle simpson javascript
constructor in javascript
what does this refer to in javascript
?. in javascript
declare sql function
what is a constructor in javascript
callsite
% in javascript
dot operator in sql
how to call a function inside a function in javascript
javascript object function
method inside object javascript
notion ink design labs
javascript function object
javascript is not a constructor
how to get value of object in javascript
keyword in javascript
java call constructor from constructor
declare function javascript
mastering lab
sql object_name
object function javascript
access object inside object javascript
javascript get constructor
object.is js
starting at object with constructor ‘object’
dna mastering
javascript anonymous function
object methods in javascript
javascript contextual menu
javascript function is not defined
for of javascript
global function javascript
javascript object inside object
new keyword in java
this in constructor javascript
call variable javascript
javascript ease in out function
variable global en javascript
time-binding
time binding

Source: InApps.net

Rate this post
As a Senior Tech Enthusiast, I bring a decade of experience to the realm of tech writing, blending deep industry knowledge with a passion for storytelling. With expertise in software development to emerging tech trends like AI and IoT—my articles not only inform but also inspire. My journey in tech writing has been marked by a commitment to accuracy, clarity, and engaging storytelling, making me a trusted voice in the tech community.

Let’s create the next big thing together!

Coming together is a beginning. Keeping together is progress. Working together is success.

Let’s talk

Get a custom Proposal

Please fill in your information and your need to get a suitable solution.

    You need to enter your email to download

      [cf7sr-simple-recaptcha]

      Success. Downloading...