What is "This"?

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.

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.

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.

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.

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.

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!!

Comments

[Basti Ortiz]

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!

[Pascal Schilp]

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

[Bluebell Lester]

I wanted to say the same :D

[dsteoh]

this post really helped! Thanks :)

[Ben Halpern]

Obligatory

Ben Halpern

@bendhalpern

Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to

14:27 PM - 20 Mar 2015

1182511620