You Don't Know JS: this & Object Prototypes

Chapter 1. this or That?

One of the most confused mechanisms in JavaScript is the this keyword. It’s a special identifier keyword that’s automatically defined in the scope of every function, but what exactly it refers to bedevils even seasoned JavaScript developers.

Any sufficiently advanced technology is indistinguishable from magic.

— Arthur C. Clarke

JavaScript’s this mechanism isn’t actually that advanced, but developers often paraphrase that quote in their own mind by inserting “complex” or “confusing,” and there’s no question that without lack of clear understanding, this can seem downright magical in your confusion.

Note

The word “this” is a terribly common pronoun in general discourse. So, it can be very difficult, especially verbally, to determine whether we are using “this” as a pronoun or using it to refer to the actual keyword identifier. For clarity, I will always use this to refer to the special keyword, and “this” or this or this otherwise.

Why this?

If the this mechanism is so confusing, even to seasoned JavaScript developers, one may wonder why it’s even useful. Is it more trouble than it’s worth? Before we jump into the how, we should examine the why.

Let’s try to illustrate the motivation and utility of this:

function identify() {
    return this.name.toUpperCase();
}

function speak() {
    var greeting = "Hello, I'm " + identify.call( this );
    console.log( greeting );
}

var me = {
    name: "Kyle"
};

var you = {
    name: "Reader"
};

identify.call( me ); // KYLE
identify.call( you