What is ‘this’ in JavaScript?

Key Takeaways

• this’ in JavaScript typically refers to the object that ‘owns’ the method, but this can vary based on how a function is called.
• When there’s no current object, ‘this’ refers to the global object. In a web browser, this is represented by ‘window’.
• this’ remains the global object when calling a function, but when calling an object constructor or any of its methods, ‘this’ refers to the instance of the object.
• The context of ‘this’ can be changed using methods like call(), apply(), and bind(). These methods call a function with a given ‘this’ value and arguments.

JavaScript is a great programming language. That would have been a controversial statement a few years ago, but developers have rediscovered its beauty and elegance. If you dislike JavaScript, it’s probably because:

• You’ve encountered browser API differences or problems — which isn’t really JavaScript’s fault.
• You’re comparing it to a class-based language such as C++, C# or Java — and JavaScript doesn’t behave in the way you expect.

One of the most confusing concepts is the ‘this’ keyword. In most languages, ‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

Global Scope

If there’s no current object, ‘this’ refers to the global object. In a web browser, that’s ‘window’ — the top-level object which represents the document, location, history and a few other useful properties and methods.

window.WhoAmI = "I'm the window object";
alert(window.WhoAmI);
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true

Calling a Function

‘this’ remains the global object if you’re calling a function:

window.WhoAmI = "I'm the window object";

function TestThis() {
	alert(this.WhoAmI); // I'm the window object
	alert(window === this); // true
}

TestThis();

Calling Object Methods

When calling an object constructor or any of its methods, ‘this’ refers to the instance of the object — much like any class-based language:

window.WhoAmI = "I'm the window object";

function Test() {

	this.WhoAmI = "I'm the Test object";

	this.Check1 = function() {
		alert(this.WhoAmI); // I'm the Test object
	};

}

Test.prototype.Check2 = function() {
	alert(this.WhoAmI); // I'm the Test object
};

var t = new Test();
t.Check1();
t.Check2();

Using Call or Apply

In essence, call and apply run JavaScript functions as if they were methods of another object. A simple example demonstrates it further:

function SetType(type) {
	this.WhoAmI = "I'm the "+type+" object";
}

var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // I'm the newObject object

var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // I'm the new2 object

The only difference is that ‘call’ expects a discrete number of parameters while ‘apply’ can be passed an array of parameters. That’s ‘this’ in a nutshell! However, there are several gotchas which may catch you out. We’ll discuss those in my next post…

Frequently Asked Questions about ‘this’ in JavaScript