this special operator JS Home  <<  JS Reference  <<  this

• <<    set
• typeof     >>

Description

The this special operator generally refers to the 'owner' of the function we're executing, or put another way, to the object that a function is a method of.

• The above description is dependant upon the context in which we use the this special operator.

Syntax

Parameters

None.

Global Context

When the this special operator is used outside any function, in the global context, this refers to the global object. For browsers the global object is window.

Following is an example of the this special operator used in the global context.

// Global context.
this.aGlobalVar = 'fred'; // attach to global object
alert(window.aGlobalVar; 

Object Context

Object Method

When the this special operator is used on an object, its bound to the object the method is called on.

Following is an examples of the this special operator used within an object method.

// Function context.
var o = {  
  a: 1,  
  b: function() {  
    return this.a;  
  }  
};  
alert(o.a.toString());

Object Constructor

When the this special operator is used on an object, its bound to the object the method is called on unless the constructor returns another object.In this case the this special operator is bound to the returned object.

Following are examples of the this special operator bound to the constructor object and also to a different returned object.

// Object construction.
function A1() {  
  return this.a = 1;  
}  
var o = new A1();
alert(o.a.toString());

// Object construction returning a different object.
function A2() {  
  this.a = 1; // Executed but dead code  
  return {a:2};
}  
var o = new A2();
alert(o.a.toString());
 

Function Context

When the this special operator is used inside a function, it returns the owner of the function.

Following are examples of the this special operator used in the function context.

// Function context.
function a(){  
  return this;  
} 
alert(a().toString());
var o = {  
  a: 1,  
  b: function() {  
    return this;  
  }  
};  
alert(o.toString()); 

Event Context

The examples in this section are applying functions to an onclick event thus mixing markup with scripting which is not best practice. This is done purely to make the examples easier to understand. The preferred way to cope with onclick events is to use event listeners, as described in JavaScript Advanced Tutorials - Lesson 7 - Events

Event Context By Reference

When the this special operator is to be used for an event, the function that is triggered by the event isn't bound to any object, therefore the this refers to the global object. For browsers the global object is window. Lets expand on this by looking at an example.

The function changeValue() should change the text of the button below.

// Change button colour.
function changeValue() {
  this.value = 'button text changed';
} 

// The HTML for the  'this Operator (eventA)' button is:
<p><input type="button" value="this Operator (eventA)"
       onclick="changeValueA()" /></p> 

Because the this functionality is not tied to the <input /> element when the code above executes, when the changeValue() function runs it looks to change the colour of the window object which owns the function. The window object doesn't have a value attribute to change and so the function fails.

Event Context By Element

In this example we are passing the object we wish to modify using the this keyword as we do a click, thus ensuring we have the correct object to modify.

The function changeValue(obj) should change the text of the button below.

// Change button value.
function changeValue(obj) {
  obj.value = 'button text changed';
}

// The HTML for the  'this Operator (eventB)' button is:
<p><input type="button" value="this Operator (eventB)"
       onclick="changeValueB(this)" /></p> 

Because the this functionality passes the object to our method our change to the button text now works.

• <<    set
• typeof     >>