The Common Enemy, JavaScript's "This" Keyword Saves The Day

Developers everywhere both seasoned and those just beginning to code, all at one time or still never understand the this keyword of javascript, most view it as being complex. The key to understanding and simplifying the ideas behind the this keyword in JavaScript is by understanding;

1. Why we need this and why we should use this in the first place.
2. How this works.
3. How to identify what this is bound to.

According to Getify in his "you dont know Js series", explains this as a "special identifier keyword that's automatically defined in a scope of every function,but what exactly it refers to bedevils even seasoned JS Developers".

But why do we need to this?

Getify explains that this provides a more elegant way of implicitly "passing along" an object reference, leading to cleaner API design and easier re-use. The more complex your usage pattern is, the more clearly you will see that passing context around wouldn't be an advantage to you, nor anyone reading your code. This allows us to reuse functions with different context, in other words it allows us to decide which object should be focal when invoking a functional method.

There are lots of confusions associated with the use of this;
Most developers try to think about it too literal. Most developers feel this refers to the function itself, but the fail to note that this binding has nothing to do with where a function is declared, but has instead everything to do with the manner in which the function is called.

But how do we identify what `this is bound to?;
Note:

1. The value of this is usually determined by a functions execution context. Execution context here means how the function is called.
2. It is important to know that this may be different (refer to something different) each time the function is called.

Brandon Morelli in his article "Javascript: The keyword 'this' for beginners", outlined that there are five general rules that you can use to determine what this is bound to;

A. Global Object:Fire up your chrome console(ctrl+shift+j), type ; console.log(this), you notice what is outputted is the window object, this means that 'this' refers to the global object and it is as such because we are in the global scope. But to further prove that this here refers to the global object, lets declare a variable, in your console paste this code, var myName =
Johnson;, now when you call myName it returns Johnson but guess what else would return Johnson now copy and paste the code window.myName and see what it returns.

What all of this mean is that every variable declared in the global scope is attached to the global or window object and that was why this when declared in the global scope refers to the global object.

Remember our Note (1); the value of this is determined by when it is called. Say we have a function that returns this what do you think the console would log; try guessing before you run the code. The result is that the this, this time would refer to the window object and why is that? Because the nearest parent object to the this keyword is still the global object.

function name()
{
    console.log(this);
}

name();

Another rule we could use to determine what this is bound to is the;

B. Declared Object:
In this case when the keyword this is used inside of a declared object say var person = {};, the this keyword refers to the nearest parent object the method is called on. Take an example;

var author = 
{
  first: 'Johnson',
  last: 'Ogwuru',  
  full: function() 
    {
      console.log(this.first + ' ' + this.last);
    }
};

author.full();

It logs=>(Johnson Ogwuru). To further prove that this in this context refers to the nearest parent object; copy and run the following code on your console;

var author = 
{
  first: 'Johnson',
  last: 'Ogwuru',  
  full: function() 
    {
      console.log(this);
    }
};
author.full();

As you would see the console returns the person object, proving this has taken the value of author. One last thing, remember we said that this refers to the nearest parent object; but how about a situation where we have nested statements;

var author = 
{
  first: 'Johnson',
  last: 'Ogwuru',  
  full: function() 
    {
      console.log(this.first + ' ' + this.last);
    },
  author2: 
    {
        first : "Jane",
        last: "Johnson",
        full: function() 
        {
          console.log(this.first + ' ' + this.last);
        }
    }
};

author.full();
author.author2.full();

When author.full() is invoked, inside the function this is bound to the author object, and when author.author2.full() was invoked, this was bound to the author2 object which is the nearest object to it.

Final Points to Note:

1. The value of this is usually determined by a functions execution context.
2. In the global scope, this refers to the global object.
3. According to getify, we use they this keyword to avoid complexities. Imagine a scenario in our previous example where we tried using author.first instead of this.first and it happens we have another global variable(that we might or might not be aware of) with the name author, this trying to reference it, would lead to difficult-to-debug errors.

To read more on this follow this links;

1. codeburst
2. JavaScriptisSexy