JavaScript and this

this can be tricky in JavaScript. Coming from an OOP based language, users may expect this to always refer to it's enclosing function and be suprised when it sometimes doesn't.

Let's take a look at a simple function and see how invoking it in different ways changes the value of this:

function getSound () {
  return this.sound;
}

This is the function we will use to check how this can be set. Simply, it looks for a sound property in this.

Let's see what happens when we invoke getSound without setting this:

getSound(); //undefined

Uh-oh, It returns undefined. Since we didn't pass this, and we didn't set the 'use strict' pragma, this aliases the global object. Our global object did not have a sound property so the result is undefined.

Let's see how we can set this:

var cat = {sound: 'meow'};

cat will be our this value. It has a sound property.

getSound.call(cat); //'meow'

Great! We passed the this value as the first argument to getSound.call.

getSound.apply(cat); //'meow'

Likewise, we passed this as the first argument to getSound.apply.

An important thing to remember in JavaScript is that objects can be altered at runtime. Let's see what happens if we make getSound a method of cat:

cat.getSound = getSound;
cat.getSound(); //'meow'

Cool! By making getSound a method of cat we got the desired result. JavaScript uses the caller as the this value.

Finally, we can bind this, so that when a function is invoked, it's this always refers to the bound value:

var catSound = getSound.bind(cat);
catSound(); //'meow'

Now, whenever catSound is called, it will reference cat. The this value has been bound in the function.

These are a few ways this can be set in a function.

The most important thing to remember is this is dynamic; it can be set and altered at runtime.

I find it useful to think of this as an additional parameter that can be passed in.