What Is This?

Javascript can be a pretty illusive language. It gives you objects, but it is not what traditional object-oriented programming languages are like. It gives you arrays, but their typeof is not "array". With enough time spent learning and using Javascript, these nuances start to feel natural. But for anyone who is new to this programming language, things can get quite frustrating very fast. In Javascript, the keyword this is quite different from how this same keyword behaves in other programming languages.

In this article, we will take a look at how the keyword this behaves in Javascript in different contexts and in different modes.

Is This Window?

Given that you are in the environment of a web browser, this refers to window in the global context. window in web browsers is the global object. This is true, regardless of the mode: strict or not.

1
2

console.log(this) // Window {...}
console.log(this === window) // true

In server-side environments, such as Node.js, this refers to global:

console.log(this === global) // true

Going Nuts With Functions

In non-strict mode, this inside functions must always refer to some object. When a top-level function is called, this refers to the global object:

1
2
3
4
5

function thisThat() {
	console.log(this)
}

thisThat() // global object

The same function, when defined in strict mode, will have a different interpretation of this:

1
2
3
4
5

function thisThat() {
	console.log(this)
}

thisThat() // undefined

Methods

But that’s not all. When functions are invoked as methods on objects, this refers to the object themselves:

1
2
3
4
5
6
7

var thing = {
	thisThat: function() {
		console.log(this)
	}
}

thing.thisThat() // thing

This shows that for the function thing.thisThat, this refers to thing. By now, if you are thinking that this is easy (pun intended) then you are in for a big surprise. Take a look at the following snippet:

1
2
3
4
5
6
7
8
9

function thisThat() {
	console.log(this)
}

var thing = {}
thing.thisThat = thisThat

thisThat() // global object
thing.thisThat() // thing

In Javascript, this is not at all affected by where the function was defined. It is all about the context and what object the function or method was called on.

Constructors

Now, slap a new keyword in front of the function call, and this becomes a new object.

1
2
3
4
5

function ThisThat() {
	console.log(this)
}

new ThisThat() // ThisThat {}

Javascript constructors have a lot more going on behind the scene. You can learn more about them here.

With .bind

The method bind available on all functions in Javascript that returns a new function for which this is always some specific pre-defined object:

1
2
3
4
5
6
7

function thisThat() {
	console.log(this)
}

thisThat = thisThat.bind('Hello')

thisThat() // Hello

With .call or .apply

Similar to how bind works, call and apply allows this to be bound to some object but at invocation. Unlike bind, call and apply invokes the function immediately with the given this binding.

1
2
3
4
5
6

function thisThat() {
	console.log(this)
}

thisThat.apply('Hello') // 'Hello'
thisThat() // global object

Both of these functions also allow arguments to be passed programmatically. You can learn more about them here.

Wrap Up

Javascript keyword this may seem very confusing at first - and in many ways it is confusing to say the very least. However, in real use, this starts to make sense and as mentioned earlier becomes a natural and rather interesting way of dealing with contexts of functions. In this article we have looked at some of the common scenarios where the interpretation of this varies, but there are more. In case you are struggling to understand how this keyword works, we recommend you open up some Javascript REPL (e.g. Node.js REPL or your web browser’s developer console) and start messing around with it.