The 'this' keyword

In this post, we will take a dive into the keyword "this". It can be very confusing at first, but once we take a closer look you will see how simple it is. What is "this"? It will always reference the object that it is executing the current function. Okay? So exactly what object ? Well, it will be determined when the function gets invoked. There are five different invocations: Global reference, Free function, .call/.apply, construction mode, and method. Also, in Javascript functions are objects which is the reasoning for using dot notation. You will see that I avoided using arrow functions. When you do be careful, because arrow function inherit the "this" value for the containing function,

Here..we go..are you ready? First, Global Reference is the global object that is in the window inside the browser and global in node. So, "this" by itself, variables using the keyword var, and regular function will reference to the global object. In the snippet below google chrome developer is used.

You got "this", because next up is...Free function invocation. The binding target is the global object (window in the browser but global in node, duh). I mean.. it's not really useful but it was picked as a binding for 'this'. Since, the function is being called freely, it is a Free function invocation.

A very simple rule is if the function is part of an object, it is known as method invocation. The "this" will reference that object itself. The binding target is the object on the left of the call time dot. In the example below, an object was declared and assigned to city with two properties: a string variable and method. When the food method in the city object is being called, it will reference the object itself. In conclusion, always remember "this" will reference to the object on the left of the calling dot.

Now, we are getting to the fun part. What if we need "this" to reference another object instead of the one it is in? Good question! Well the answer to all your problems is .call or .apply innovation. The .call method calls a method on an object, replaces with another object for the current one. While .apply method calls the function, replaces the object for the "this" value of the function. The binding target is the first argument to .call or .apply. These invocation will invoke a function immediately and change the "this" original object reference to the desired one. They both get the same job done, however .apply handles an array as an argument.

Did I lose you, yet? Geez..I hope not because this is the last one, Constructor function. The constructor function can be called by using the new operator. The binding target is the new object created. A constructor function will be declared by using Pascal Case for the name of the class.

This is my last "you got this"... I swear.

Thanks for reading my very first blog! I am an immersion junior student at Operation Sparks. I hope that you found this read very helpful and educating. Because, at first I was very confused about the key word "this". I would guess where the "this" object was referencing too. Bad practice, right? Worry no more, because this blog got you!