The this keyword in Javascript at Five Levels

Let’s discuss the this keyword in JavaScript:

1. To a Child:

Imagine you’re playing a game where each player has their own scoreboard. When it’s your turn, “this” refers to your own scoreboard. In JavaScript, “this” is a special word used inside a function, and it refers to the object that the function is working with at the moment.

2. To a Teenager:

In a classroom, when a teacher asks a question and says “What’s your answer?”, the word “your” refers to whoever is being asked. In JavaScript, “this” works in a similar way. Inside a function, “this” refers to the object that the function is currently dealing with.

3. To an Undergraduate Computer Science Major:

The this keyword in JavaScript behaves a bit differently than in other languages. It’s a special object that’s usually determined by how a function is called. It could refer to the global object, the object that’s currently being constructed, the object that the function was called on, or even a specified object.

4. To a Graduate Computer Science Student:

The this keyword in JavaScript is a property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value. Its value is determined by how the context was entered and can’t be changed while execution is ongoing. It doesn’t refer to the function itself or its lexical scope.

5. To a Colleague (Professional Developer):

In JavaScript, this is a context-based keyword that refers to the object that is currently invoking a function/method. The value of this is determined based on the calling context and the structure of your code. It’s determined at runtime, not at creation time of a function, and can refer to different things depending on whether you’re in strict mode or not, and whether the code is standalone, an object method, a constructor, an event handler or an ES6 arrow function (which doesn’t have its own this, but takes it from its outer function). Understanding this is crucial to mastering JavaScript, particularly for object-oriented programming, function invocation, and event handling.

Explanation using Ladder of Abstraction

I’ll explain the this keyword in JavaScript by progressively becoming more detailed:

Level 1 (General Idea):

this in JavaScript is like a special keyword that a function uses to refer to the object that invoked or called the function.

Level 2 (Slightly More Detail):

Think of this as a way of keeping track of the object that is currently “active” or “in use” when a function is called. It’s kind of like when you’re in a group and someone says, “Hey, this person over here did something!” In that sentence, “this person” is similar to this in JavaScript.

Level 3 (More Specific):

When you have an object and you call a method on that object, this refers to the object. For example, if we have a car object and it has a method called start(), when we say car.start(), inside the start method, this refers to the car object.

Level 4 (Detailed Explanation):

In JavaScript, the value of this is determined by the invocation context of the function (where and how the function is called). It’s not decided at the time the function is written, but rather at runtime when the function is invoked. If a function is invoked as a method of an object, this will be set to the object itself. If a function is called as a regular standalone function, this will be the global object (window in a browser, global in Node.js), or undefined if in strict mode.

Level 5 (Expert Level):

In addition to the basic usage, this can have its context changed by specific function methods like .call(), .apply(), and .bind(). These methods allow us to specify the this value (i.e., the calling context) when invoking a function. It’s important to note that arrow functions handle this differently from regular functions; they don’t create their own this context but instead inherit this from the enclosing execution context.

As a rule, understanding this involves understanding the context in which a function is invoked, as that determines the value of this within the function’s execution context. This concept is integral for object-oriented programming in JavaScript.

Richard Feynman Explanation

Imagine you’re at a party and you overhear someone say ‘I’m having a great time!’ Well, you instinctively understand that the ‘I’ in that sentence refers to the person who said it. They’re referring to themselves. In a lot of ways, the this keyword in JavaScript is a lot like the word ‘I’ in our party scenario. It’s a way for a function to refer to the ‘object’ that’s currently doing the talking.

Now, here’s where things get a little bit tricky. Just like how ‘I’ can refer to different people depending on who’s speaking, this can refer to different objects depending on how the function was called. The important thing to remember is that it’s all about the context. If an object calls a function as one of its methods, then this refers to that object. But if the function is just called by itself, without any object, then this refers to a global object - it’s like a person talking to themselves at the party.

There’s also a special trick in JavaScript where you can tell a function to pretend that it’s being called by a particular object, even if it’s not really. This is done using special functions like .call(), .apply(), and .bind(). It’s kind of like someone at the party throwing their voice to make it sound like someone else said ‘I’. And to add to the complexity, JavaScript has these things called ‘arrow functions’ that don’t play by the same rules. They don’t use their own ‘I’, they use the ‘I’ of the surrounding area.

So you see, it’s not always straightforward, but once you get the hang of it, understanding this is all about understanding who’s the ‘I’ in the current conversation.

Robin Williams Explanation

All right, let’s have a go explaining this in JavaScript with a bit of humor as Robin Williams might:

“Okay folks, gather round! this in JavaScript is kind of like a chameleon at a color-changing contest. It’s always changing based on where it’s standing. It’s a regular stand-up comedian - its meaning changes depending on the audience!

Imagine you’ve got a function. It’s a lovely function, does its job, pays its taxes. Now if you attach this function to an object and call it, this within the function is like saying ‘I’ - it refers to the object itself. ‘Who am I? Well, thank you for asking, I’m the object who owns this function!’ That’s it having a chat with itself, it’s a bit self-obsessed that way.

But hold onto your hats, because if you call the same function, just by itself, not attached to any object - oh boy, this gets a bit of an identity crisis! It starts thinking it’s the window, the global object. Yes, it’s a bit of a drama queen, thinks it’s the center of the universe!

But wait, there’s more! You can also tell this who to be. Yes, folks, this is an actor and you’re the director. Using functions like .call(), .apply(), or .bind(), you can say ‘Cut! In this scene, this, you’re playing the role of my chosen object! Action!’

And then, there are arrow functions. Those sneaky little fellas. When you’re in an arrow function, this stops being the comedian. No more changing, no more acting. It takes it straight - it’s just what this was in the function’s outer scope, no ifs or buts. It’s like it looked around, saw what this was outside, and said, ‘Well, if you can’t beat ’em, join ’em!’

So there you have it, folks. this in JavaScript, always keeping you on your toes. It might be a bit of a chameleon, but remember, it just wants to fit in!”