Caffeinated Simpleton - Latest Comments in An Introduction to JavaScript’s “this”

Re: An Introduction to JavaScript’s “this”

justin — Tue, 29 Dec 2015 11:58:28 -0000

Not only practical, but a fine work of literature too.

Re: An Introduction to JavaScript’s “this”

chug2k — Tue, 29 Dec 2015 03:31:43 -0000

Still the best explanation on the internets

Re: An Introduction to JavaScript’s “this”

Carton Donofrio — Fri, 15 Feb 2013 14:44:16 -0000

"This" probably is confusing to newbies.

Re: An Introduction to JavaScript’s “this”

John — Thu, 23 Feb 2012 21:41:04 -0000

I've read many explanations of this, most are very long, none have come close to this one. I now actually feel like I understand it. Many thanks

Re: An Introduction to JavaScript’s “this”

Andrea Padovani — Mon, 23 Jan 2012 04:18:33 -0000

Very nice tutorial, thank you :-) Do you know if any of these methods is suitable to actionscript too?

Re: An Introduction to JavaScript’s “this”

Dylan Thomas — Tue, 17 May 2011 12:27:05 -0000

Excellent summary. Reading 'The Good Parts' and lots of online examples - none clearer that this one :-)

Re: An Introduction to JavaScript’s “this”

justin — Sat, 18 Dec 2010 21:11:29 -0000

Good catch!

I recently updated the post to use "self" instead of "my", since more and
more people are using that style these days. It's also the style I prefer
now. I guess I missed one!

Re: An Introduction to JavaScript’s “this”

Simon — Sat, 18 Dec 2010 21:05:09 -0000

I look at the code above and am confused on one line of code - see below, last line I paste. Where do you get 'return my.condiments' from? should it not be 'return self.condiments' as you note in the comment at the end of that line?

function HotDog() {
var self = this; // self references the current this, which is correct.
self.condiments = "mustard, ketchup";
self.getCondiments = function() {
return my.condiments; // self is guaranteed to be a reference to the original "this"

Re: An Introduction to JavaScript’s “this”

Sean Sandy — Tue, 04 May 2010 22:14:13 -0000

Wait, php or javascript? At least javascript has some consistency to it, php... not so much

Re: An Introduction to JavaScript’s “this”

ls_n — Fri, 12 Mar 2010 18:13:21 -0000

There are a few more intricacies to 'this'. I've attempted to address most of them here: http://lucassmith.name/pub/...

Re: An Introduction to JavaScript’s “this”

vilcans — Tue, 29 Sep 2009 08:40:23 -0000

Good article. I have been very confused by "this".

Re: An Introduction to JavaScript’s “this”

Olivier Mengué — Tue, 29 Sep 2009 04:24:55 -0000

Variable scope in JavaScript is function. There is no block scope.
Defining variable 'a' with a 'var' statement inside the loop is just misleading. JavaScript is not Java.
So the two version do the same.

Also you didn't test your code at all.. Else you would have seen that alert is not called by setTimeOut but instead inside the loop.
You should have written this:
setTimeout(function { alert(i) }, 500);

Re: An Introduction to JavaScript’s “this”

hugobryn — Mon, 28 Sep 2009 18:11:13 -0000

There is a bit more to the setTimeout() function to be totally clear:

1) setTimeout(myObj.myFunc, 1000) - this set to global window object

2) setTimeout(function() { myObj.myFunc() }, 1000) - this set to myObj as we want it.

But you can also pass a string to setTimeout and basically setTimeout() becomes a sort of eval:

3) setTimeout('myObj.myFunc()', 1000) - this set to myObj

Number 2 is the best way to go though.

Re: An Introduction to JavaScript’s “this”

Marcos — Mon, 28 Sep 2009 10:29:27 -0000

All that stuff looks like PHP. Disgusting language JavaScript, ughhh...

Re: An Introduction to JavaScript’s “this”

Sean Sandy — Mon, 28 Sep 2009 03:43:27 -0000

As was pointed out to me on Stackoverflow.com, you can also solve it by using closures http://stackoverflow.com/qu...

Re: An Introduction to JavaScript’s “this”

Jeffrey04 — Mon, 28 Sep 2009 02:34:00 -0000

i used methods introduced in http://odetocode.com/Blogs/... to solve 'this' problems

Re: An Introduction to JavaScript’s “this”

justin — Sun, 27 Sep 2009 16:32:11 -0000

Updated the first example. Thanks!

Re: An Introduction to JavaScript’s “this”

justin — Sun, 27 Sep 2009 16:28:28 -0000

Yeah, I think you're right DougBTX. I've changed it.

Re: An Introduction to JavaScript’s “this”

justin — Sun, 27 Sep 2009 16:18:56 -0000

You're right that it's unnecessary. I was trying to combine the previous point, but it might just make things more confusing. I might change it.

Re: An Introduction to JavaScript’s “this”

DougBTX — Sun, 27 Sep 2009 15:59:31 -0000

In the "solving our setTimeout problem" code sample, why do you use apply? At this point you have a reference to the object, so you can call myHotDog.getCondiments() directly.

Re: An Introduction to JavaScript’s “this”

Lachlan — Sun, 27 Sep 2009 09:35:11 -0000

Using:

var my = this;

Is such a beautiful fix, I'm amazed by its simplicity. Cheers!

Re: An Introduction to JavaScript’s “this”

budda — Sun, 27 Sep 2009 09:27:22 -0000

It will work if you call it once in a function-block.
The scope of the timeout-callback will be the same as where it was called.
try this:
for(var i=0;i<3;i++)
{
setTimeout(alert(i), 500); //Will write 3, 3 times because i is 3 when alert is called
}

for(var i=0;i<3;i++)
{
var a = i;
setTimeout(a, 500); //Will write 0, 1, 2 because a is only within the scope of the current iteration
}

Google closures for more info

Re: An Introduction to JavaScript’s “this”

mspreij — Sun, 27 Sep 2009 09:22:39 -0000

Ok, I was wrong :-) when doing alert(this.condiments) instead it says "undefined". Now I also see why setting var me = this; helps.

Re: An Introduction to JavaScript’s “this”

MSpreij — Sun, 27 Sep 2009 08:45:37 -0000

You still have to fix it in the first example (under "this Gets Tricky").
Also, the following works just fine for me, in various browsers (IE7/8, FF)? No errors on the console and it happily alerts after 3 seconds.

function HotDog() {
this.condiments = "mustard, ketchup";
this.getCondiments = function() {
alert(1);
return this.condiments;
}
}

var myHotDog = new HotDog();

setTimeout(myHotDog.getCondiments, 3000);

Re: An Introduction to JavaScript’s “this”

justin — Sun, 27 Sep 2009 06:55:41 -0000

You're right about the order, it's been corrected. I don't really believe in putting millisecond timeouts in examples since it's needlessly detail oriented.