javascript ant

When I first started programming, the use of the keyword this was somewhat befuddling. It was not until I truly grasped the concept of JavaScript objects that I fully understood the purpose of the keyword. If you still scratch your head when it comes time to use the keyword this, I would recommend spending some time reviewing and learning about JavaScript objects. Then, come back to this article to drive home the concept of the keyword this.

If you think you have a firm grasp on JavaScript objects, let's look at 10 scenarios that require us to ask the question, "What is this referring to?"

Scenario 1

// window.alert(this); alert(this); this.alert(this); //

What are all four usages of this referring to?

Here, I've written 3 statements that use the keyword this to refer to the window object. In JavaScript, there is always a global object at the head of the scope chain. In the context of a web browser, the global object is the window object. All three of these JavaScript statements use the keyword this to refer to the window object.

Scenario 2

// var funcName = function(){ alert(this); }(); //

What is this referring to on line 3?

Here the keyword this is again a reference to the global window object. Or, more accurately, funcName is a property of the window object and thus this refers to the window object. The key thing to remember is that when using this inside of a function, this will refer to the object that the function is a property of. In the code example the funcName function is a property of the window object.

Scenario 3

// var funcName = function(){ var funcName = function(){ alert(this); }(); }(); //

What is this referring to on line 3?

Here the keyword this is again a reference to the global window object regardless of how many times we embed a function inside of a function.

Scenario 4

// var objectName = {}; objectName.whoAmI = "objectName"; objectName.identifyMySelf = function(){ alert(this.whoAmI) }; objectName.identifyMySelf(); //

What is this referring to on line 7?

Here this refers to the object called objectName. This is the same concept that we have seen before, except instead of using the window object I created my own object, and then created a property of the object which I named identifyMySelf. This property is a function, and it uses the keyword this to refer to object context (objectName) in which it's a property.

Scenario 5

// var objectName = {}; objectName.whoAmI = "objectName"; objectName.objectInside = {}; objectName.objectInside.whoAmI = "objectInside"; objectName.objectInside.identifyMySelf = function(){ alert(this.whoAmI) }; objectName.objectInside.identifyMySelf(); //

What is this referring to on line 11?

Here this refers to the object called objectInside. Unlike functions, encapsulated objects change what this will refer too. My point is that objects dictate what this will refer to.

Scenario 6

// var CookieCutterConstructorFunction = function(instanceName){ this.whoAmI = instanceName }; var instance1 = new CookieCutterConstructorFunction("instance1"); var instance2 = new CookieCutterConstructorFunction("instance2"); alert(instance1.whoAmI); alert(instance2.whoAmI); //

What is this referring to on line 3?

Here this will refer to the new instance that is created from a constructor function. The CookieCutterConstructorFunction is a constructor function, which is used to construct new object instances. When the object is first constructed it uses the keyword this to apply properties to the newly created object. The context for the this keyword is being manipulated by using another keyword, the new keyword.

So in a nutshell, when the new keyword constructs a new object, it adds properties found inside the constructor function to the newly created object instance. This is why I called it a cookie cutter, because a constructor function is really just a template for creating objects. Notice how I customize my objects by passing unique property values as parameters to the constructor function.

Scenario 7

// var CookieCutterConstructorFunction = function(instanceName){ this.whoAmI = instanceName }; CookieCutterConstructorFunction.prototype.identifyMySelf = function(){ alert(this.whoAmI) }; var instance1 = new CookieCutterConstructorFunction("instance1"); var instance2 = new CookieCutterConstructorFunction("instance2"); instance1.identifyMySelf(); instance2.identifyMySelf(); //

What is this referring to on line 7?

Here we are using the prototype object to attach an inherited property (function in this case) to all object instances (ex. instance1 and instance2) of our CookieCutterConstructorFunction. This would mean that when the identifyMySelf function is called, the keyword this inside of the function will refer to the current object instance.

Scenario 8

// var identifyMySelf = function(){ alert(this.whoAmI) }; var CookieCutterConstructorFunction = function(instanceName){ this.whoAmI = instanceName }; var instance1 = new CookieCutterConstructorFunction("instance1"); identifyMySelf.call(instance1); //

What is this referring to on line 3?

Here we are using the JavaScript core method call() to call, or essentially invoke, the identifyMyself function like it is a property of the instance1 object. Done in this manner, the keyword this will refer to the instance1 object.

Scenario 9

// <html> <body> <a href="#" onclick="alert(this.title); title="I am an anchor element">who am I</a> </body> </html> //

What is this referring to on line 4?

Here this refers to a DOM object. Specifically, the anchor DOM element. To JavaScript, this element is in fact an object, and the title attribute of the HTML element is really a property of this object.

Scenario 10

// <html> <body> <a href="#" title="I am anchor1">who am I</a> <a href="#" title="I am anchor2">who am I</a> <a href="#" title="I am anchor3">who am I</a> <script language="javascript"> var getAnchors = document.getElementsByTagName('a'); for ( var i = 0, j = getAnchors.length; i < j; ++i ){ getAnchors[i].onclick = function(){ alert(this.title); return false; } } </script> </body> </html> //

What is this referring to on line 13?

Here this refers to a DOM object. Specifically, the anchor DOM element. Take note of how simple it would be to get the title attribute of every anchor element on a web page using a loop and the keyword this to refer to a specific element during the loop. As you can see, the keyword this can be pretty handy when dealing with objects.