Blog

Front End Development topics with a touch of humor

This

What is this, anyway?

October 1, 2020


Ah, this. It has a slightly comical feel. You can almost sense the jokes coming, corny ones that no one expects you to laugh at:

Abbott: You throw the ball to first base.
Costello: Then who gets it?
Abbott: Naturally.
Costello: Naturally.
Abbott: Now you've got it.
Costello: I throw the ball to Naturally.
Abbott: You don't! You throw it to Who!
Guess you had to have been there.

But this, unlike who, is a serious matter--at least if you are a JavaScript programmer. This means everything.

What does this mean?

Okay, maybe not everything. But it's actually kind of important, because this determines the execution context. This means that the function will behave differently, depending on the value of this. So you really need to know what this is, in any given context.

As always, it's easier to learn from concrete examples than abstract rules, don't you think? So let's use some concrete examples.

Global this

        console.log(this);
        
        //Window {parent: window, opener: null, top: Window, length: 1, frames: Window ...}
        

Outside of a function or object or any other conflicting situation, this refers to the global object. This normally means, as you can see by this experiment in my browser, the window.

In other words, whenever we write a normal thing in a program, this is the window itself. We don't think about this very often, because it's the default state of things.

Function this

            function myFunc() {
                console.log(this);
            }

            myFunc();
            //Window {parent: Window...(etc)}
        

I referred to this inside a function, but the result was the same--window. How is this interesting, cool, or humorous? It's the same result.

So we find that referring to this inside of a function is the same as when in the global space.

but, wait!

            function myFunc2() {
                'use strict';
                console.log(this);
            }
            
            myFunc2();
            //undefined
        

Gasp. Strict mode says differently--it says that if this is not set, it shall be undefined. Strict mode asks the browser to enforce certain areas that in the standard language are flexible and can cause annoying errors, so the programmer is forced to stand with good posture and not bite one's fork while eating, so to speak.

Examples of this bindings

Let's pass an object into a function and see how this is handled.

            var myObj = {whosOnFirst: "Who"};

            var whosOnFirst = "Naturally";

            function whoISonFirst() {
                console.log(this.whosOnFirst);
            }
        

A few notes on what's going on here in this fairly contrived example. We made an object that we'll pass into the function, with the key: value combo of whosOnFirst set to "Who".

We made a global variable called whosOnFirst with the value of "Naturally". It's a normal variable, in other words. A neat trick that's important to understand this experiment is that you could refer to a global variable like this: this.whosOnFirst. Another quick example. Say you were to write the following in the console:

            var x = 10;
            this.x
            //10

            var car = "Mercedes";
            this.car
            //"Mercedes"

            var mucho = "beaucoup";
            this.mucho
            //"beaucoup"
        

Again, this just shows that global variables are in the context of the window, and are properties of the window. Who knew?

Now. The function, which is not correctly camelcased, you'll note (hangs head in shame) logs out the value of whosOnFirst. This experiment should show how this can be changed.

        whoISonFirst();
        //Naturally -- the this of whosOnFirst is global, thus the window. Thus the global variable is used. 
 
        whoISonFirst.call(myObj);
        //Who -- the call() method changes this to the object. Now this is myObj. And the whosOnFirst property of myObj is "Who". 
        
        whoISonFirst.apply(myObj);   
        //Who -- same deal. The this has been changed
        

This is a simple example, but important. We have found that this defaults to the window, and that a variable is a property of the global this. We have found that the this inside an object remains the window, except in strict mode, where it becomes undefined.

We have found that we can use call() and apply() to manually change the value of this for our own purposes--in this case, to the this of an object passed in a function. This allows us to override the global behavior of a variable and get at the key of an object instead.

So, what is this?

This, if you'll pardon a pun, is only the beginning. This is a big topic in JavaScript, and it's very helpful to dive in and clear up some of the questions. For me, this is best done through bite-sized pieces, like this post. If we can learn a little bit, we can add that to the other bits we know. Eventually, this will all begin to make sense.