This post (This binding in JavaScript – 4. New 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
6. Gotchas and final notes

In this post we'll talk about new binding.

How new binding works

new is a special keyword in JavaScript.

It does a lot of things, but we'll only talk in detail about how it relates to binding.

To start off, note thatnew has even higher precedence than even hard binding. Another way of thinking about it is that it ignores the normal binding rules and does its own thing.

You can usenew when calling functions like so:new foo().

new does 4 things:

1. It creates a new empty object.
2. It makesthis be the new object.
3. It makesfoo.prototype be the prototype of the object.
4. It implicitly returnsthis if nothing else is returned from the function.

For now ignore points 3 and 4 until a different blog post. Let's focus on points 1 and 2, the binding.

To recap, when you call a function withnew before it, you create a brand new empty object which is assigned tothis inside the function.

For example:

functionfoo(){console.log(this);}newfoo();// outputs an empty object

As mentioned,new has higher precedence than even hard binding.

constobjForBind={name:'objForBind'};functionfoo(){console.log(this);}constboundFoo=foo.bind(objForBind);// hard bind foo to objForBindnewboundFoo();// logs a new empty object to the console, not objForBind

Explanation:
new has higher precedence than explicit and implicit binding. It ignores them, creates a new object, and binds it tothis.