Skip to main content

What is ‘this’ in JavaScript?

By Craig Buckler

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(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


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();

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 = {};, "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…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad