Understanding THIS in JavaScript.

With going through FreeCodeCamp.com I have been also been exploring other mediums to help in the learning process. In doing so I have been reading a lot about how this in JavaScript can be hard to understand. However the courses with FreeCodeCamp have left me with what I think is a really simple and straight forward understanding of this.

I have to say these are merely my interpretations of the teachings, so if my explanation is inaccurate I encourage any comments and feedback to help get my understanding corrected before it causes me harm! lol

Simply put this is pointing to the object to the left of the dot.

Again, just a basic answer. Where things can get confusing is with nested functions or callbacks, as well as when you use .apply(), .call() or .bind(). The last 3 methods will alter where this
points to. How about some code examples?? Ok…

var test_object = {
    name: "Natac",
    birth_year: 1987,
    get_age: function(current_year) {
    console.log(this.name + " is " + (current_year - this.birth_year));
    },
}
test_object.get_age(2015); // this points to test_object

As you can visually see now on the last line test_object is to the left of the dot and therefore this will be assigned to it. Pretty simple I thought… I know that there is term ‘callback hell’ for when you have callbacks within callbacks, and thats when this can overwhelm your sense of vision! But I have found that sticking to the “left of the dot” rule I have done alright. Now, what was that stuff about .apply(), .call() and .bind() changing where this points?

Alrighty then, this blog is only really about trying to clear up the confusion with the term this and where it points, so I will not start in on the differences and all the cool things that can happen with the following 3 methods. In reality they deserve their own blog post, which I found a very helpful and well written version at JavaScriptisSexy. But since you are here anyway I will yield an example. We will “borrow” the method from the object above to find out the new objects information.

var new_object = {
    name: "Joe",
    birth_year: 1876,
};

test_object.get_age.call(new_object, 2015);

This shows clearly that new_object has no method called get_age. But with the help of .call() which takes as its first argument the object to assign to the value of this. The other 2 methods do the same thing but with .apply() you can pass in a array of values to a function. The easiest example is with the Math.max() which does not accept an array as a argument normally, but with the following all works as expected!

Math.max.apply(null, [1,5,6,23,56,4])
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s