Determining the value of ‘this’

Hey, I’m not a big fan of wordy Medium articles, so here is my abridged version of determining the context of ‘this’.

Golden rule: Look to how the function is invoked at call time.

There are five bindings that help us determine the context of this: Global, Immediately-invoked function expressions, Method invocation, Constructor mode, and .call(), .apply(), and .bind().

Global: When ‘this’ is referenced in the global scope, ‘this’ will refer to the Global Window Object. Pretty simple!

Because we are in the global scope, the Global Window Object will print to the console.

Immediately-invoked function expression: When a function is called freely in the global scope, ‘this’ will once again refer to to the Global Window Object. The keyword here is “global”, meaning the object ‘this’ points to in this scope will always be the Global Window Object. It’s all in the name!

The createVampire function is immediately invoked in the global scope. Therefore, if we were to console.log(this) in the createVampire function’s scope, we would see the GWO. Let’s take a look.

I added Line 60. When this runs, we see the Global Window Object. If ‘this’ were to refer to the person object, then the person object would have been logged to the console.

Method Invocation: When a function is assigned to a property of an object, ‘this’ will always refer to the object on the left of the dot. If we think back to basic rules for accessing objects with dot notation, we place the name of the object to the left of the dot, and we place the key on the right. The same concept applies here in that when the function is being called at runtime, we need only look to the left of the dot to determine the object upon which we are calling the function.

Line 28 tells us what ‘this’ refers to when the fullName method is invoked. ‘this’ now refers to the character object.

“Katherine Pierce” is printed to the console when the fullName function is invoked.

Constructor mode: The ‘new’ keyword added to Javascript for ES6 creates a new object by setting the prototype, executing the constructor function with ‘this’ (linking the object to the new object), and finally returning the new object. Therefore, ‘this’ will always point to the newly created object.

Our constructor function (lines 32–36) sets ‘this’ to the newly created object. The newly created elena object applies the arguments passed in line 38 and sets them as properties.

Now the new elena object is printed to the console!

Using .call(), .apply(), .bind().

1. .call — this method is used to call an object’s method and can pass another object as an argument.
2. .apply — this method called similarly to .call() only it passes any additional arguments in an array. It also uses an object’s method and can pass another object as an argument.

Let’s look at an example.

You can use .call or .apply to update the string with the tvShow object’s properties. Let’s take a look at one small difference between these two methods.

Given a new function, we can create a new string that still utilizes properties from our tvShow object. Notice the difference in how .call and .apply pass in new arguments: .apply requires additional arguments be passed in through an array.

In the immediately-invoked function expression example above, when I console.log(this) in the createVampire function, the Global Window Object was logged to the console. If I were to console.log(this) again in the details or moreDetails functions, we would instead see our tvShow object.

Now, let’s finally talk about .bind — this method binds a function to an object. This method essentially glues a reference to ‘this’ so you always know to which object ‘this’ refers.

Our new vampire we created not too long ago, Elena, is thirsty! She doesn’t like human blood, so she’s going to go hunting in the woods…

Line 76, I reassigned bind to show what will print if we bind to a different object.

Hope these examples and explanations were helpful! Creating examples using personal interests helps me to have fun with code that I am playing around with when learning new concepts, hence The Vampire Diaries references! :) Thanks for reading, there will be more… xoxo Gossip Girl