close

  menu      DavidRodenas
CONTACT  

Javascript Understanding This

In javascript this is evil. Until ES2015 it never works at it expects. Here I explain few cases and how to understand better this.


alice.sayHello(bob)

What is this?

This is an implicit parameter of a function call. Implicit means that it is invisible, someone else writes it for us.

When you execute:

alice.sayHello(bob)

it internally executes:

alice.sayHello.call(alice, bob)

There are no methods

Javascript only has functions, and unlike other programming languages, functions are not binded to any object.

So when we see this code:

alice.sayHello(bob)

Here sayHello can live without the alice object. This is perfectly legal:

var sayHello = alice.sayHello;
sayHello(bob);

This is because sayHello is just a function, nothing else.

Giving value to this

Any function can use this:

function sayHello(other) {
  console.log(this.name + ' say hello to ' + other.name);
}

What will happen if we do:

sayHello(bob);

ES3

If we are using ES3, the result is likely to be: ` say hello to bob`.

This happens because this becomes window. So:

function isThisWindow() {
  console.log(this === window);
}
isThisWindow();

Shows true in the console.

ES5

Here we have two modes: strict mode, and compatibility mode.

Compatibility mode behaves exactly like ES3.

Strict mode set this to undefined:

'use strict';
function isThisUndefined() {
  console.log(this === undefined);
}
isThisUndefined();

Shows true in the console.