JavaScript

JavaScript: Using 'this'

Using object literal notation we can create and assign objects to variables.

Listing 1

var myObject = {
    message : "Hello World!"
};
alert(myObject.message); // Hello World!

By using the name of the variable the object is asigned to, we can refer to properties of the object from within the object.

Listing 2

var myObject = {
    message : "Hello World!",
    message2 : myObject.message
};
alert(myObject.message2); // Hello World!

Treating Functions as Methods

Object properties can also point to functions. We can look on these functions as methods of the object.

Listing 3

var myObject = {
    message : "Hello World!",
    getMessage : function() {
    	return myObject.message;
    }
};
alert(myObject.getMessage()); // Hello World!

The parentheses placed at the end of the object property, myObject.getMessage(), cause the function pointed to by the property myObject.getMessage to be executed.

Introducing 'this'

this is a very useful keyword that allows the same function to be used by many objects, with the relevant object's properties being used by the function. However, care must be taken to consider in which contexts the function will be used. Problems often occur when this is used in event handlers and functions delayed via setTimeout; in these situations the function can be called 'out of sequence' in different contexts and this may point to unexpected objects.

Listing 4

var myObject = {
    message : "Hello World!",
    getMessage : function() {
    	return this.message;
    }
};
alert(myObject.getMessage()); // Hello World!

In the above example, the function pointed to by myObject.getMessage is immediately executed by the parentheses operator (). The function uses myObject as its context, so this.message points to myObject.message and "Hello World!" is displayed.

Remember, however, that functions in JavaScript are objects themselves and while they may be defined within one object, they can later be called by other objects.

Listing 5

var myObject = {
    message : "Hello World!",
    getMessage : function() {
    	return this.message;
    }
};

// Assign the function to another variable
var fn = myObject.getMessage;
alert(fn()); // undefined

The variable fn points to the same function as myObject.getMessage. fn is a global variable and is thus a property of the window object. When the function is called by using the parentheses operator on the fn variable, the context for the function becomes window. Within the function this will become window and this.message will become window.message. There is no global variable message defined so "undefined" is displayed.

Listing 5

var myObject = {
    message : "Hello World!",
    getMessage : function() {
        return this.message;
    }
};

var message = "Hello Global!";
var fn = myObject.getMessage;
alert(fn()); // Hello Global!

This time we define a global variable called message and "Hello Global!" is displayed.

We can always be specific about which message we want displayed by the function:

Listing 6

var myObject = {
    message : "Hello World!",
    getMessage : function() {
        return myObject.message;
    }
};

var message = "Hello Global!";
var fn = myObject.getMessage;
alert(fn()); // Hello World!

Making Use of 'this'

this is not something to be avoided. It allows multiple objects to use the same function but provide their own property values for its use.

Listing 7

var myObject = {
    message : "Hello World!",
    getMessage : function() {
        return this.message;
    }
};

var mySecondObject = {
    message : "Hi There!",
    getMessage : myObject.getMessage
};

alert(myObject.getMessage()); // Hello World!
alert(mySecondObject.getMessage()); // Hi There!

An alternative way of setting the context for a function is to use call or apply. These execute the function but provide the context as a parameter.

Listing 8

var myObject = {
    message : "Hello World!",
    getMessage : function() {
        return this.message;
    }
};

var mySecondObject = {
    message : "Hi There!"
};

alert(myObject.getMessage()); // Hello World!
alert(myObject.getMessage.call(mySecondObject)); // Hi There!