Portfolios that get you hired. Find out more...

Your first touch and taste of JavaScript `this`

Ok, so far we have got three things down:

  • - to grasp `this` you must have a basic understanding ofobjects
  • - in other languages, `this` usually points to the object containing the method in which `this` is used. That's not the case with JavaScript.
  • - in most cases, `this` points to an object. Our challenge is to be able to tell which object this is pointing to.

You may have heard of ways to change the way `this` behaves. You'll get to that soon enough. But first, you have to see how `this` acts when you haven't tried to tame it.

You also did an exercise where you created your own object. You actually did it, right?

"Normally, I point to the object that called the method (or function) where I am found." - is what `this` said to me after we had a couple of beers. I mean, if `this` could talk, that's what it would say. Weird, I know.

It's time for you to have your first taste of `this`. You will look at `this` in its simplest form. Enjoy this while you can. This is the only time when `this` is going to act normal.

Go back to your `Person` object. You're going to add another property to your object. But, the property is not going to be a number or a string. This property is going to be a function. Or, strictly speaking, amethod.

In programming, you can look at a function as a recipe for a specific task. Any time you call a function, you're telling the computer to follow the steps in that function.

When the function belongs to (or is a property of ) an object, we call it a method. In other words, a method is simply a fancy name for a function that is part of an object.

This is important because, in the practical sense, you'll use `this` inside of methods. Let's take a look at an example, using the `Person` object.

    Person.sayName = function(){
        console.log(this.name);
    }
    //Let's call our method
    Person.sayName();
This should output:
    J. P. Knight.

Notice `this` inside the code. In fact, let's get `this` actually tells us it is.

Person.showMeThis = function(){
    console.log(this);
}

//Let's call the showMeThis method
Person.showMeThis();

You should now see the `Person` object in your output.

You can look at `this` as a placeholder. It simply represents an object. In the above examples, `this` is used in place of `Person` or, you may say, `this` is pointing to `Person'. It's like a way for an object to refer to itself: `this.name` has the same value as `Person.name`.

Take a moment to be comfortable with the above statement. Get in touch if you have any questions.

But it goes deeper...

On the surface, it may look like `this` means the object that owns the method where `this` is found. Your brain will try to tell you that `this` refers to "this object" or even "this function".

But, that is an illusion! Don't get deceived. In reality, `this` means the object thatcalled the method where `this` is found.

So, yes, in the above example, `this` refers to the `Person` object. Not because that's where the method `sayName` belongs. But because we used the `Person` object to call the function.

Take a moment to digest the above information. You've just learnt one way `this` could behave.

Exercise 2

Create a method that outputs the age of `Person` using `this`.

***
This is where JavaScript `this` gets really weird. You could call `Person.sayName` in a different way. `this` would then refer to a completely different object.
Your task is to get used to different ways you can call a method.Then, get comfortable with how `this` behaves with each way you call a method.
Don't worry, it will all make more sense once you've gone through the next section...
Next: Here is what happens when JavaScript `this` gets weird...
Self-taught developers: tips for writing code that gets you hired! Join now!