Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Curtis Alcorn
10,389 Points'this' keyword?
Any particular reason these videos keeps doing xhr.readystatechange or xhr.responseText instead of using the this keyword? Ex. this.responseText instead, since we're inside the xhr object
3 Answers
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 PointsHi Curtis Alcorn,
Good question, but you’re actually not inside the xhr object. this in the context of the video would refer to the window object.
If you’re coding along with the video you could try logging this to the console, and you’d see what I mean.
Now, you are using/referencing the xhr object, and as such, the only way to get the responseText, etc is to reference them using dot or box notation on the xhr object.
Does that make sense?
Curtis Alcorn
10,389 PointsHey Brandon, thank you for your reply! I see your point during part of the video, but not during others. When you are inside the onreadystatechange function, it is inside the xhr object and using the 'this' keyword worked interchangeably when I tried it. Outside of the function though, I see why you can't use it such as you can't say this.send() because that's inside the window object. Hopefully this makes sense lol.
Brandon White
Full Stack JavaScript Techdegree Graduate 34,660 PointsCurtis,
That does make sense. The xmlhttprequest/xhr object has an onreadystatechange property that you can give the value of a callback function, and that function binds the this keyword to the object on which that function was called (which in this case would be the xhr object.
So within that callback function, you can use this to refer to the xhr object.
Now, as far as why Dave opts not to use the this keyword within that callback function, I don’t know. Perhaps it’s just the way he chooses to write his code. Or it could be that because he’s teaching, he’s opting to not confuse the viewer/student by introducing this (and as a consequence lexical binding) as it can be a bit complicated.
That said, there’s nothing wrong with you using the this keyword if you understand what it refers to within the scope in which you’re trying to use it.
James Croxford
12,722 PointsReally good question and responses both of you! I'm yet to properly be introduced to the 'this' keyword on the Fullstack JS course yet, but it's interesting to see that it could be implemented inside of the callback function!
Curtis Alcorn
10,389 PointsThanks for that James!
I think my first experience with the 'this' keyword was something like this. var person = { firstName: "Curtis", lastName: "Alcorn", fullName: function() {this.firstName + this.Lastname}; }
It uses values from within itself to do something else.