This post (This binding in JavaScript - 1. Default binding) was originally published onSargalias.

In this series we talk aboutthis binding in JavaScript.

This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.

Basically in JavaScript there are 4 modes forthis binding. Make that 5 if we include arrow functions.

In order of lowest priority to highest priority, here they are:

1. Default binding
2. Implicit binding
3. Explicit binding
4. New binding
5. Arrow functions

In this post we'll talk about default binding.

How default binding works

Default binding is what happens if you don't use any other kind of binding.

If we call any functionplain / without a "." before it, we will get default binding.

An example of a plain function call isfoo(). Notice that the function call does not have a "." before it.

An example of a function call that's not plain isobj.foo().

In the plain function callfoo(), default binding applies.

When default binding applies,this is thewindow object in normal mode andundefined in strict mode.

Examples for default binding

Here are some examples for default binding to illustrate the point a bit more.

Plain function call

Consider the following code.

'use strict';functionfoo(){console.log(this);}foo();

What will the code above output?

Answer:undefined

Explanation:

We call our function with this code:foo().

The codefoo() is a plain function call. It does not have a "." before it. Therefore default binding applies. So the answer iswindow in normal mode orundefined in strict mode.

As we are in strict mode, the answer isundefined.

Synchronous function reference call

Consider the following code.

'use strict';constobj={foo(){console.log(this);},};constfoo=obj.foo;foo();

What will the code above output?

Answer:undefined

Explanation:

We call our function with this code:foo().

That code decides everything.

As it is a plain function call, we're using default binding, sothis isundefined.

In combination with the line above it, it may be more difficult to see.

constfoo=obj.foo;foo();

We might understandably think that it should result inthis beingobj.

However that's not what happens. The only thing that matters is the function call, and the function call is plain and without a "." before it.

Therefore we are using default binding andthis becomes undefined.