this is defined at call-time

If you understood the rule, you probably realized it means that this, in nominal cases, is not defined by how the function is declared, but on a case-by-case basis by how the function is called. From one call to the next, this could change!

This may seem like a bizarre notion at first, but if you’ve done any object-oriented programming, this is really a commonplace thing: after all, instance methods are usually defined only once, when writing the class, and yet when we use them on instances, each one calls it with their own this, don’t they?

Not so alien a notion after all.

Look at this code. Here’s Alice. She’s an object with a name property that is a String, and an identify() method to introduce itself. Cool beans.

Now here’s Bob. He has his own name but shares its identify() method with Alice. There is really just one function in memory here, and two objects that reference it as a method of theirs. Note that Bob could absolutely have named his property differently, say greet(). It wouldn’t have changed the semantics of our example.

Now, the $1,000 question is: if we run bob.identify(), what do we get: Bob or Alice?!

I’ll let you ponder this for a while; I'll wait.

Not too long though. This is a video after all, so pause it, that’s what it’s for. You could even rewind if need be.

Let me try and help with a diagram. So we get Alice, with her own name and her identify() method, which as explained earlier is nothing but a property that happens to reference a function instead of, say, a number.

And here comes Bob with his own name as well, also referencing that same function (using the same property name, which again is irrelevant).


The winner is… Bob!

Why? Because in that “Subject, Verb and Complement” call the subject was Bob.

Don’t believe me? Fine, let’s prove this together.

(Example 02-subject-verb-complement.js)

So, you can already notice I also added examples of calls for Alice, using both direct property indexing on line 13, with the dot operator and a hardcoded identifier, and indirect indexing on lines 14 and 15 with the brackets operator. For our topic here, this doesn’t change anything.

Let’s run this… (demo) 3 Alices, one Bob. Told ya. Say, I’d appreciate a bit of trust here, you know…

(Back to slides)

It is truly critical that you understand that our function here does not belong to Alice, or to any other object. Sure, it was first declared inside of Alice’s declaration, but nobody cares really: it’s a function, and as with all functions, it’s not beholden to any object intrinsically.

OK so that was our “golden rule” example, so to speak. What of other cases, then?

JavaScript: this is it

You’ll finally understand how this works in JavaScript… And you can bet it’s worth it!

Already enrolled?
Sign in to continue learning.