The value of JavaScript’s this keyword can seem puzzling. This post aims to make it a little clearer.

Variables and properties in JavaScript are equivalent:

They are both assigned the same way, they are used the same way in JavaScript expressions, and so on. Is there really any fundamental difference between the variable i and the property i of an object o? The answer is no. Variables in JavaScript are fundamentally the same as object properties.

JavaScript, The Definitive Guide, 4.6, by David Flanagan (NB: See comment below)

It continues that global JavaScript variables - top-level code, so not part of a function - are just properties of the global object. The global object is created automatically when the JavaScript interpreter fires up. If you’re coding for the browser, the Window object is the global object.

The special keyword this crops up in methods, and its value varies depending on how it is invoked. This is perhaps best understood when illustrated.

Illustrate this

1. this object we’re in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//In methods of the global window object
alert(this); // [object Window]

(function () {
  alert(this);
})(); // [object Window]

//In method of a local object
var a = {
  object: "A",
  declareObject: function() {
    alert(this.object);
    alert(this);
    alert(this === a);
  }
};

a.declareObject(); // A, [object Object], true

2. this has no fixed abode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var a = {
  object: "A",
  declareObject: function() {
    alert(this.object);
    alert(this === a);
    alert(this === b);
  }
};

var b = {
  object: "B"
};

b.declareObject = a.declareObject;
//When called, method now belongs to object b
b.declareObject(); // B, false, true

So, this refers to the object that called the method.

3. Nested objects can obfuscate which object this is, but we can handle it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var myObject = "Apple";

var a = {
  b: {
    c: function() {
      console.log("B is for " + this.myObject + "!")
    },
    myObject: "Banana"
  }
};

//var abc points to method c
var abc = a.b.c;
//When called, same as saying window.abc()
abc(); // B is for Apple!

//var ab points to object b
var ab = a.b;
ab.c(); // B is for Banana!

4. this works just the same in a constructor:

1
2
3
4
5
6
7
8
9
10
11
12
13

//NB: Functions are objects too!
function Letter(letter) {
  this.object = letter;
  this.declareObject = function() {
    alert(this.object);
  };
}

var a = new Letter("A");
var b = new Letter("B");

a.declareObject(); // A
b.declareObject(); // B

The special keyword new creates a new object and calls on the constructor in the context of the new object. As expected, the value of this is the new object.

5. this works just the same when handling events: Click me

1
2
3
4
5
6
7
8
9

  // <a href="#" id="link">Click me</a>

  var link = document.getElementById("link");

  link.onclick = function() {
    this.innerHTML = "I've been clicked!";
    return false;
  };

JavaScript can respond to events happening in the browser. In the above example, we use document.getElementById to return a link element (an object with its own collection of properties). This has the built-in property onclick. When someone clicks on the link, link.onclick calls the event handler (an anonymous function).

In other words, our event handler operates on the object through which it was invoked: our link element.

6. You can override the default this, e.g.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var a = {
  object: "A",
  declareObject: function() {
    alert(this.object);
    alert(this === a);
    alert(this === b);
  }
};

var b = {
  object: "B"
};

a.declareObject(); // A, true, false
a.declareObject.call(b); // B, false, true

The value of this becomes the object passed to the call method.

Conclusion

Rebecca Murphey probably sums it up best:

In JavaScript, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being invoked.

jQuery Fundamentals (Chapter 2), by Rebecca Murphey

Are you feeling confident about this yet?

• Updated 15 Sept. 2012: In strict mode, this inside a global function is undefined. Here’s why…