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;
- Why we need
this
and why we should usethis
in the first place. - How
this
works. - 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:
- The value of
this
is usually determined by a functions execution context. Execution context here means how the function is called. - 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:
- The value of
this
is usually determined by a functions execution context. - In the global scope,
this
refers to the global object. - According to getify, we use they
this
keyword to avoid complexities. Imagine a scenario in our previous example where we tried usingauthor.first
instead ofthis.first
and it happens we have another global variable(that we might or might not be aware of) with the nameauthor
,this
trying to reference it, would lead to difficult-to-debug errors.
To read more on this
follow this links;