Core JavaScript 1.5 Reference:Operators:Special Operators:this Operator

From MDC

Contents 1 Summary 2 Syntax 3 Description 4 Method binding

[edit] Summary

The this keyword refers to the context object (a.k.a. current object). In general, in a method, this refers to the calling object.

Operator
Implemented in:	JavaScript 1.0
ECMA Version:	ECMA-262

[edit] Syntax

this

[edit] Description

this is read-only.

this can be used to obtain a reference to the current context object and allows properties and methods in this execution context to be referenced with respect to this (e.g., this.member). The context object can be considered as a "hidden parameter" that is passed to a function. There are three ways this can be passed:

Type	Triggered by	this
implicitly in a method call	object.method( . . . )	object
explicitly through Function.prototype.call	function.call(object, . . . )	object
explicitly through Function.prototype.apply	function.apply(object, [. . .])	object

If none of the above ways are used, the global object is passed as the context object (e.g. when this occurs at top-level outside of any functions, or when a function is called without being called on an object as in func(arg1, arg2);).

When manipulating the DOM through the ECMAScript bindings, it is common to use JavaScript for event handling, which handles the execution context in a particular way.

[edit] Method binding

As a consequence of this being "passed" to functions, this is not fixed for a function. In other words, a method is not bound to the object that it is a method of, it is only referenced by the object.

To illustrate the concept of binding, consider the following:

function Car(brand) {
   this.brand = brand;
}

Car.prototype.getBrand = function() {
   return this.brand;
}

var foo = new Car("toyota");
println(foo.getBrand());       // assumes a println function has been defined

As expected, this outputs "toyota".

var brand = "not a car";
var bar = foo.getBrand;
bar();

This returns "not a car" instead of "toyota". this is the global object, which is window in a browser environment, since that is the context from where bar() is called. The global object, in turn, also has a property called brand with the value "not a car". If it did not have a property called brand, undefined would have been returned instead.

As seen bar is not linked in any way to foo. An object may have a property referring to the function, but that function does not belong to that object. Specifically, this in the function is not automatically replaced by foo upon defining getBrand. Instead this is supplied by the function caller. That is, in the expression foo.getBrand(), foo is passed as this to the function referred to by foo.getBrand. All of the following are equivalent:

foo.getBrand();
bar.apply(foo);
foo.getBrand.apply(foo);

This lack of method binding is intended. It allows methods to be "shared" or "moved" from object to object. Continuing the previous example:

function Airplane(brand) {
   this.brand = brand;
}
var plane = new Airplane("boeing");

plane does not have a getBrand method, but it does have a brand property, making it compatible with Car's getBrand method. Therefore, the function referred to by Car.prototype.getBrand can be "shared" with either an object constructed by Airplane or Airplane.prototype.