On Thu, 30 Sep 2004 16:16:42 -0500, Ryan Stewart <zz********@gSPAMo.com>
wrote:
[snip]
I'm not entirely clear on the use of "this" in JS [...]
Whenever code is executed, it is given an execution context. This context
holds the scope chain, used to resolve properties, and local variables.
Each context has a this value associated with it. The actual value depends
upon the code that will be executed and how it is executed.
There are three types of code: global, eval, and function code.
Global code, that which doesn't exist within a function block or eval
call, has a this value that refers to the global (window) object.
alert(this == window); // true
Eval code, that which is defined by a call to eval, takes the this value
of the context in which it's executed. So at a global level, code executed
in an eval call will have a this value that refers to the global object.
Eval code executed within a function will use the same reference as that
function.
alert(eval('this == window')); // true;
var obj = {
member : function() {
alert(eval('this == obj')); // true;
}
};
With function code, the this value is provided by the caller. In normal
circumstances, the this value refers to the object of which the function
is member. The second eval example demonstrates this indirectly. The
function, member, is a method of the object, obj. When called with
obj.member(), the this operator will refer to obj. However, there are
three cases there things may not occur as described or expected.
1) When the call method is used.
The call method allows the caller to explicitly specify the value to be
used for the this operator, overriding the default.
2) Global functions.
This case doesn't exhibit any strange behaviour as long as you're aware
that global functions, like global variables, are properties of the global
object. As such, the this operator refers to the global object within
global functions.
3) Inner functions.
In something like
var obj = {
member : function() {
function inner() {
alert(this == obj); // false!
}
alert(this == obj); // true
}
};
you might expect the inner function to share the this reference of its
outer function. However, this is not the case.
When a function is called and a new execution context is created, a
variable/activation object is created. This object holds the local
variables and inner functions of the called function, and is the first
object checked in the scope chain. When the activation object is required
to provide a this value, such as when an inner function is called, it
supplies a reference to the global object.
So, what do you use the this operator for? Everything you use it for in
languages such as C++ and Java, namely to refer to the "current" object.
The biggest example is with intrinsic events. When a listener is
associated with a HTML element, it effectively becomes a property of that
element. When the listener is called, this association causes the this
operator to refer to that element. This makes it much easier to pass a
reference to the element to functions that need it. This also extends to
user-defined objects.
This description might be more overwhelming than enlightening, so please
ask if you have any questions.
Mike
....or if anyone spotted a mistake in my description.
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
