loading...
Cover image for What is "This"?

What is "This"?

basedenergy profile image Devin Golden ・2 min read

Simplifying the "this" Javascript keyword

The "this" keyword always refers to an object, but the value of "this" changes depending on where it is called. When a function is called, an execution context is created that contains a reference to "this". Because the value of "this" changes depending on execution context, we can determine the value of "this" by examining the function's call-site, or where it is called.

Conveniently, there are four simple rules to help determine the value of "this"!

Rule #1: Default Binding

When called alone, or within a function, "this" will refer the Global object. In a browser, this will refer to the Window object. One exception to this is if the user is in strict mode, in which case "this" will be undefined.

default example


In this example, you would get a console log of the global object

Rule #2: Implicit Binding

If a function is contained within an object, "this" will refer to the nearest parent object. Even if the function is only referenced in the object, "this" will still refer to the object.

implicit example

In this example, we console log out "😸 Meow!"

Rule #3: Explicit Binding

There are three functions call, bind, and apply that can be used to set the value of "this". Call and apply work largely the same way, the first argument passed to each will be what "this" refers to. Bind actually creates a new function which a permanently assigned "this" value.

explicit example

In this example, all three functions set "this" explicitly.

Rule #4: New Binding

When using the new keyword, "this" will refer to the new object that is being created.

new example

In this example, "this" points to the new object and prints out my kitty's name

The Arrow Function Exception!

One exception to these general rules of thumb is that when using an arrow function, "this" will retain the value of its parent scope.

arrow example

Here, "this" retains the value of its parent function.

The Dev Recap:

So a quick summary of the "this" keyword:

  1. "This" is usually determined by a function's execution context.
  2. By default, "this" refers to the global object (window object in a browser).
  3. When the "new" keyword is used, "this" will refer to the new object.
  4. Call, bind, and apply can be used to set "this" value.
  5. Arrow functions do not re-bind "this".

Hopefully this is helpful to someone new to Javascript who is trying to wrap their head around the "this" keyword! Thanks for reading and don't forget to follow!!

Discussion

pic
Editor guide
Collapse
somedood profile image
Basti Ortiz (Some Dood)

This is a nice and quick reference on this for those familiar with it already. It's a great crash course on everything.

However, I wouldn't exactly say that this is going to be "helpful to someone new to JavaScript". If I read this when I first started JavaScript, all this jargon and terminologies would blow my mind off of its brain stem (no joke). It is especially intimidating to see those big words for a first-time programmer. Now that I think about it, I do see that the deep vocabulary of the article is completely necessary given the topic. It's just hard to explain the dynamic nature and context-sensitive behavior of this. Oh, what a pain it is to teach!

Nonetheless, this is a satisfyingly concise article on this. Good job!

Collapse
thepassle profile image
Pascal Schilp

Frankly I really appreciated the meme in the banner image. Cool post!

Collapse
bluebell_lester profile image
Bluebell Lester

I wanted to say the same :D

Collapse
dsteoh profile image
dsteoh

this post really helped! Thanks :)

Collapse
ben profile image
Ben Halpern

Obligatory