this confusion

[Stevo]

Simplified example code which can be copy/pasted and will exhibit the
problem.

var ob={id:2};
ob.alertid=function(){alert("id="+this.id);}
ob.funcs=[ob.alertid];
ob.testalert=function(){
this.alertid(); //this works
this.funcs[0](); //this doesn't
}

ob.testalert();

I have an object with an id property. The alertid function alerts that
id property if it's called directly, but not if it's called via an array
of function pointers. I don't understand the difference. Why is 'this'
different in those two cases. It's the same object method isn't it.

The output is:

id=2
id=undefined

[RobG]

On Aug 9, 7:23 am, Stevo <[e-mail]:

Simplified example code which can be copy/pasted and will exhibit the
problem.

var ob={id:2};
ob.alertid=function(){alert("id="+this.id);}
ob.funcs=[ob.alertid];
ob.testalert=function(){
this.alertid(); //this works
this.funcs[0](); //this doesn't

}

ob.testalert();

I have an object with an id property. The alertid function alerts that
id property if it's called directly, but not if it's called via an array
of function pointers. I don't understand the difference. Why is 'this'
different in those two cases. It's the same object method isn't it.

I think the best post I've seen about the this keyword is the one here
by Mike Winter:

<URL:
http://groups.google.com.au/group/co...26cd885e01c292

>

The first part is about closures, the second part on this is
excellent.
--
Rob

[David Mark]

On Aug 8, 5:23 pm, Stevo <[e-mail]:

Simplified example code which can be copy/pasted and will exhibit the
problem.

var ob={id:2};
ob.alertid=function(){alert("id="+this.id);}
ob.funcs=[ob.alertid];
ob.testalert=function(){
this.alertid(); //this works

Right. Because you called a method of the ob object. In this case,
"this" is ob, which has an id property.

this.funcs[0](); //this doesn't

funcs[0] holds a reference to an anonymous function. The fact that ob
has a property (alertid method) that references it as well is
meaningless. In this case, "this" refers to the anonymous function,
which has no id property.

[Stevo]

David Mark wrote:

In this case, "this" refers to the anonymous function,
which has no id property.

Thanks David, Randy, Thomas and Rob. You all said the same thing
basically, this differs depending on how it's called. Excellent link
Rob, that's one to bookmark.

I've altered the alertid function to add 'that' and it now works.

var ob={id:2};
ob.alertid=function(){var that=ob;alert("id="+that.id);}
ob.funcs=[ob.alertid];
ob.testalert=function(){
this.alertid();
this.funcs[0]();
}
ob.testalert();

That has the name ob hard-coded in the alertid function though. I wonder
if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

[Thomas 'PointedEars' Lahn]

Stevo wrote:

[...] I wonder if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

var alertid = function(that){ alert("id=" + that.id); };
// ...
ob_a.alertid = function() { alertid(this); };
ob_b.alertid = function() { alertid(this); };

or

var alertid = function(){ alert("id=" + this.id); }
// ...

and then either

ob_a.alertid = function() { alertid.call(this); };
ob_b.alertid = function() { alertid.call(this); };

or

ob_a.alertid = function() { alertid.apply(this); };
ob_b.alertid = function() { alertid.apply(this); };
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Thomas 'PointedEars' Lahn]

Stevo wrote:

[...] I wonder if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

var alertid = function(that){ alert("id=" + that.id); };
// ...
ob_a.alertid = function() { alertid(this); };
ob_b.alertid = function() { alertid(this); };

or

var alertid = function(){ alert("id=" + this.id); }
// ...

and then either

ob_a.alertid = function() { alertid.call(this); };
ob_b.alertid = function() { alertid.call(this); };

or

ob_a.alertid = function() { alertid.apply(this); };
ob_b.alertid = function() { alertid.apply(this); };
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Thomas 'PointedEars' Lahn]

Stevo wrote:

[...] I wonder if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

var alertid = function(that){ alert("id=" + that.id); };
// ...
ob_a.alertid = function() { alertid(this); };
ob_b.alertid = function() { alertid(this); };

or

var alertid = function(){ alert("id=" + this.id); }
// ...

and then either

ob_a.alertid = function() { alertid.call(this); };
ob_b.alertid = function() { alertid.call(this); };

or

ob_a.alertid = function() { alertid.apply(this); };
ob_b.alertid = function() { alertid.apply(this); };
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Thomas 'PointedEars' Lahn]

Stevo wrote:

[...] I wonder if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

var alertid = function(that){ alert("id=" + that.id); };
// ...
ob_a.alertid = function() { alertid(this); };
ob_b.alertid = function() { alertid(this); };

or

var alertid = function(){ alert("id=" + this.id); }
// ...

and then either

ob_a.alertid = function() { alertid.call(this); };
ob_b.alertid = function() { alertid.call(this); };

or

ob_a.alertid = function() { alertid.apply(this); };
ob_b.alertid = function() { alertid.apply(this); };
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Thomas 'PointedEars' Lahn]

Stevo wrote:

[...] I wonder if it's possible to create 'that' without knowing the name of the
object? Take the following example with ??? where I don't know what to set:

var ob_a={id:"a"};
var ob_b={id:"b"};
var alertid=function(){var that=???;alert("id="+that.id);}
ob_a.alertid=alertid;
ob_b.alertid=alertid;

I'm guessing that there's no way to define 'that' which would work for
both objects there, and I'd have to define an anonymous function for
each object, with hard-coded references to ob_a and ob_b in them like so:

var ob_a={id:"a"};
var ob_b={id:"b"};
ob_a.alertid=function(){var that=ob_a;alert("id="+that.id);};
ob_b.alertid=function(){var that=ob_b;alert("id="+that.id);}

var alertid = function(that){ alert("id=" + that.id); };
// ...
ob_a.alertid = function() { alertid(this); };
ob_b.alertid = function() { alertid(this); };

or

var alertid = function(){ alert("id=" + this.id); }
// ...

and then either

ob_a.alertid = function() { alertid.call(this); };
ob_b.alertid = function() { alertid.call(this); };

or

ob_a.alertid = function() { alertid.apply(this); };
ob_b.alertid = function() { alertid.apply(this); };
HTH

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Henry]

On Aug 16, 3:50 pm, [e-mail] wrote:
<snip>

In other words, a function invoked as f(...) will have a
"this" value of the global object,

function f(){
var x = (this+'');
}

with(
{
f:f,
toString:function(){alert('I am not the global object');}
}
){
f(); // alerts: I am not the global object
// So the - this - value when - f() - is
// executed is _not_ the global object.
}

You appear to have failed to take into account the role of variable
objects and the scope chain in determining the - this - value.

<snip>

So the second problem with Mike's post is that it over-complicates
the description of what one should expect of the "this" value to
be by involving the variable object, scope chain and the "new"
operator[1] in the description.

<snip>

[RobG]

On Aug 17, 12:50 am, [e-mail] wrote:

On Aug 8, 4:17 pm, RobG <[e-mail]:

On Aug 9, 7:23 am, Stevo <[e-mail]:

<..>

I think the best post I've seen about the this keyword is the one here
by Mike Winter:

<URL:http://groups.google.com.au/group/co...browse_frm/thr...

The first part is about closures, the second part on this is
excellent.

With regard to the second part only, and in spite of many excellent
posts that Mike contributed, this one doesn't quite make that rating
in my book.

The first problem is the use of the term "this operator" which,

Mike explained in another post why he uses that term. I've spent some
time trying to find it but can't.

[...]

If the reference to the method is obtained without use of dot or
bracket notation, "this" is assigned a reference to the global object.
On the other hand if dot or bracket notation is used to arrive at the
reference, "this" is assigned the object at the end of the accessor
path that leads to the reference.

In other words, a function invoked as f(...) will have a "this" value
of the global object, whereas a.b.c.f(...) would have a "this" value
of c.

Perhaps most non-intuitive in the above is that the above paragraph
applies even when an inner function is called, where one might expect
the "this" value to be preserved (as it is when code under the eval
function is invoked).

So the second problem with Mike's post is that it over-complicates the
description of what one should expect of the "this" value to be by
involving the variable object, scope chain and the "new" operator[1]
in the description.

I think he's being thorough. His explanation regarding identifier
resolution explains how the this keyword of an inner function is a
reference to the global object, even if the this keyword of the outer
function is some other value.

e.g.

function foo(){
alert('foo: this == window : ' + !!(this == window));
function bar() {
alert('bar: this == window : ' + !!(this == window));
}
bar();
}
var x = {};
x.foo = foo;
x.foo(); // foo: this == window : false
// bar: this == window : true
When resolving the local variable bar, it is found on foo's variable
object and so its this keyword is set to the global object, even
though the outer function, foo, has its this keyword set to x.

If a programmer wants the inner function to have access to the outer
function's this keyword, they can do:

function foo(){
var fooThis = this;
function bar() {
// Use fooThis
}
bar();
}

or

function foo(){
function bar() {
// this = foo's this;
}
bar.call(this);
}

>
See "Objects and this" at

<URL:http://javascript.crockford.com/survey.html>

for a much more succinct, easy to grasp, description.

It is a simple description that covers the majority of cases, but it
doesn't explain why. One reason I like Mike's explanations is that
they can be read and understood in conjunction with the ECMAScript
specification [1]. I don't think Douglas Crockford's can (which isn't
a criticism, I suspect that was never his intention).
1. Richard Cornford's posts fall into the same category, though they
are often much more difficult to understand.

--
Rob