The Keyword ‘this’ and Five Simple Rules to Know and Understand it Forever

One of the tricker, more well-known parts of Javascript is the concept of the keyword this. Python being my first language, I couldn’t understand what the point of this Javascript feature was, since my first few uses of this usually meant I was labeling it as null or undefined. After a few weeks of getting my hands deep within the this world, I am starting to realize that it is an essential side kick to Javascript’s closure scopes.

In short, this refers to the context that the current scope is referring to. It is literally a pronoun that points to some object (subject) in memory that we possibly want to work with (and very often do) within the scope of the current function invocation.

Which leads me to my next point. The keyword this does not exist until call timeWhat does this really mean? It means that Javascript does not assign a context/subject/value to this until call time, or some form of some function (including the global function) has been invoked/called, at which time Javascript will follow five simple rules to decide who this gets to be. I am acting under the assumption that the reader has a base knowledge of ‘this’ –these rules will just help solidify your understanding, and whenever you are typing away at your laptop and wondering what this is going to refer to, just do a mental check against these five rules.

1) Free Function Invocation (in the browser)

  •  A free function is one that is just floating around in the global space, not nested within an object or another function. Screen Shot 2014-05-06 at 7.04.48 PM
  • In such cases, when we call this function, this is going to evaluate to be the window.

      Screen Shot 2014-05-06 at 7.07.38 PM

2) Global Execution (in browser)

  • This is pretty similar to #1, where this will evaluate to be the window except that this refers to this any time it is referenced to in the global execution, regardless of whether or not it is within a function. The reason this distinction is important, and not just one rule, is because rule #1 is referring to this when it is executed within a free floating function. We had to execute the function itself before this had a value, and thus determined that this refers to the window. In the case of global execution, we may have a free standing statement, such as “var apple = this” and this would evaluate in the context of the global space–such as if we ran the javascript file this line was enclosed in. In this case, as I’ve said, this would reference the window object.

3) Method Invocation

  • this is the object to the left of the dot AT CALL TIME of the function referencing “this”

Screen Shot 2014-05-06 at 7.36.13 PM

  • What’s going on here is that we have created a ‘shout’ function that references “this” or more specifically “this.message” — We’ve created two objects, ‘amira’ and ‘marcus’ and both of them have ‘message’ properties. When we call ‘shout’ on each of them, in this context, this first refers to amira, and then this refers to marcus. This illustrates a very simple point. When you have a method invocation, this refers to the object to the left of the dot at call time.

4) Constructor Invocation

  • this is the brand new instance returned by the constructor

Screen Shot 2014-05-06 at 7.53.52 PM

  • In this example, we’ve created a constructor called “Food.” Food has the properties this.taste, this.calories, and this.msg — when we create new instances of this constructor, as we did with cookie and banana, we can assign values to those properties by passing them in as parameters. Then, for each Food instance, ‘this’ refers to the individual object that we have created. For cookie, this.taste refers to ‘delicious’ whereas for banana, this.taste refers to ‘decent’ because ‘this’ is bound to the new instance returned by the constructor.

5) .call or .apply invocation

  • this is your first argument to call or apply
  • There are two extremely useful methods, ‘call’ and ‘apply’ that basically allow you to manipulate what this is referring to. I won’t go into depth of how they can be used here (maybe that will be another blog post) but once you understand how ‘call’ and ‘apply’ work, then you will realize that whatever you pass in as the first parameter is bound to the keyword ‘this’ in the context of the function that you call ‘call’ or ‘apply’ on. In this particular case, you can pass in an empty object or undefined if the function you are working with does not ever reference this.

So those are the five rules for this in a nutshell. If you are ever not sure what this is, just figure out which of the five buckets it falls into, and refer to that! (Or, you can be like me, and just console.log it ;)) Credit to the awesome Phillip Alexander (and Hack Reactor!) for teaching me these concepts.

Leave a Reply

Your email address will not be published. Required fields are marked *