Profile image of chadhoglund
Submitted by chadhoglund
over 10 years

I'm having trouble understanding the "this" keyword

What does the course mean by “this” will refer to whichever object called that method.

Answer 5411086e631fe9f27d0005d8

12 votes

Permalink

Hi Chad, good question!

First we need to know that this is a placeholder.

A placeholder is something take reserves a seat for something else.

An example of a place holder in the English language is him or her, like when we refer to John’s computer we may say “it belongs to him!” We could replace him by John and it would be “It belongs to John!”

So him takes place of John and we humans translate him as John.


The same goes for this in JavaScript.

As an example, when we normally declare a variable we are working inside of an object called window. window is the browser page and everything is created inside of the window object, like for example:

var x = 33;

The real full path for x is actually

window.x = 33;

Since this takes the place of the object that owns the variable we could also write like this:

this.x = 33;

So in a sense, x, or window.x or this.x all mean the same x.

It is like saying him or John, both refer to John.


When do we use this?

We use this when there is possible ambiguity. this will specifically tell JavaScript which variable we are referring to.

Example

var x = 33;

function test(){
var x = 7;
return x;
}

Which x is going to be returned? 33 or 7?

The answer is 7. That’s because when we call the function JavaScript starts from the inside of the function first and grabs the closest x it finds.

What if instead of 7 we really wanted 33?

Well, that’s when this comes handy: var x = 33;

function test(){
var x = 7;
return this.x;
}

Now when we call the function it returns 33 instead of 7. That’s because we have instructed JavaScript to specifically return the x that belongs to the object that owns the script which is window and therefore the outer x.

And just to be sure we understand, we could have also written it like this: var x = 33;

function test(){
var x = 7;
return window.x;
}

Hope it helps.

Profile image of tarau
Submitted by tarau
over 10 years

3 comments

Profile image of blogRunner90437
Submitted by blogRunner90437
about 10 years

This is a really good explanation.

Profile image of amandathewebdev
Submitted by amandathewebdev
over 9 years

Thank you for this. I’m trying to wrap my head around “this” and so far your explanation has made some sense of it. Am I right to say that from your explanation, “this” is always tied to it’s parent object, despite it’s use in a function? It will always refer to it’s parent, which by default is the global “window” object, but you can alter “this” by tying it to a different object?

Profile image of amandathewebdev
Submitted by amandathewebdev
over 9 years

Also if you can alter it by tying it to a new object, say in this exercise the object “bob,” will it never refer to “window” again unless you set it back to “window”?

Answer 5416e3b27c82cabb84003ea6

1 vote

Permalink

this is just bob. Or susan. Or you. Anything. It takes its place.

So this is just like a he or she. You replace ‘he’ or ‘she’ or ‘it’ by a name. She is Mary. That ‘She’ is this.

Don’t worry about it. It’s just in case you no longer want bob, and want to change it to something else…basically. ;)

Profile image of KPOPer
Submitted by KPOPer
over 10 years